Данные цикла jQuery Ajax показывают по одному - PullRequest
Новая
       10

Данные цикла jQuery Ajax показывают по одному

1 голос
/ 20 сентября 2019

Я использую append на jquery.Я хочу показать данные один за другим, сначала показать загрузочную картинку в течение 5 секунд, а затем добавить идентификатор значка данных из шрифта большого размера в мелкий.

Любые подсказки, как это сделать? 

<div class="loading">
  <img src="https://loading.io/spinners/mac/lg.mac-fan-spinner.gif" />
  <div class="setBadgeID"></div>
</div>

$.ajax({
  url: "getDraw",
  type: "POST",
  data: { ID: ID },
  dataType: "JSON",
  success: function(jsonStr) {
    $('.loading').show();
    for (var i = 0; i < jsonStr.badgeID.length; i++) {
      var num = i + 1;
      var badgeID = jsonStr.badgeID[i];
      $('.setBadgeID').append(badgeID).fadeIn('slow');
    }
  }
});

$ID = $_POST['ID'];

$qTotalLuckyDraw = mysqli_query($con, "SELECT * FROM tbl_lucky_draw WHERE lucky_draw_id = '" . $ID . "'");
$dTotalLuckyDraw = mysqli_fetch_array($qTotalLuckyDraw);

$getTotalLuckyDraw = $dTotalLuckyDraw['total_draw'];
$getLuckyDrawID = $dTotalLuckyDraw['lucky_draw_id'];

$qGetLuckDraw = mysqli_query($con, "SELECT * FROM tbl_employee_attend WHERE flag = 'N' ORDER BY rand() LIMIT $getTotalLuckyDraw");
while($dGetLuckDraw = mysqli_fetch_array($qGetLuckDraw))
{
    $badgeID[] = $dGetLuckDraw['badgeid'];
    $update = mysqli_query($con, "UPDATE tbl_employee_attend SET flag = 'Y', lucky_drawid_fk = '" . $getLuckyDrawID . "' WHERE badgeid = '" . $dGetLuckDraw['badgeid'] . "'");
}

$data = array(
    'badgeID' => $badgeID,
    'totalLuckyDraw' => $getTotalLuckyDraw,
    'totalEmployeeLuckyDraw' => $getTotalLuckyDraw
);

echo json_encode($data);

1 Ответ

1 голос
/ 20 сентября 2019

Попробуйте код ниже 

     $('.loading').show();  
$.ajax({
  url: "getDraw",
  type: "POST",
  data: { ID: ID },
  dataType: "JSON",
  success: function(jsonStr) {
    $('.loading').hide();
   console.log("jsonStr" , jsonStr);
   for (var i = 0; i < jsonStr.length; i++) {
                   console.log("jsonStr[i]" , jsonStr[i]);
                  $('.setBadgeID').append(jsonStr[i]).fadeIn('slow');
                }
  }
});
...