AJAX продолжает показывать неверные данные из массива

Question

У меня есть цикл, который вызывает AJAX, чтобы узнать, есть ли какие-либо бронирования в базе данных или нет. JS передаст данные из массива в AJAX и обнаружит их в базе данных с помощью SQL-запроса.

Однако данные, возвращаемые из AJAX, верны, и если они есть в базе данных, я хочу показатьданные, возвращаемые из AJAX, и текущее значение массива в текущем цикле, но все же данные, которые я показываю из массива, являются последним индексом массива.

javascript:

function getButtonInfo() {
    var jam = [7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22];
    var lap = ['Lapangan A','Lapangan B','Lapangan Batminton'];
    var lapId = ['lapA','lapB','lapBat'];
    for (var j = 0; j < lap.length; j++){
      for (var i = 0;i < jam.length; i++){
        var lapIdFix = jam[i]+lapId[j];
        var lapId2 = jam[i]+lap[j];
        var lap1 = lap[j];
        if(jam[i] < 10){
          var jamFix = '0'+jam[i]+':00:00'; 
        }else{
          var jamFix = jam[i]+':00:00';
        }

        $.ajax({
          type: "POST",
          url:'get-button-avail-ajax.php',
          data: {
            date: document.getElementById('tgllapA').value,
            time: jamFix,
            lapangan: lap[j]
          },
          complete: function (response) {
            if(response.responseText != "0"){
              document.getElementById(lapIdFix).disabled = true;
              $('#output').html(response.responseText );
              $('#output1').html(lapIdFix);
              $('#output2').html(lapId2);
            }else{
              $('#output3').html(response.responseText);
            }
            //$('#output').html(response.responseText);*
          },
          error: function () {
              $('#output').html('ERROR!');
          },
        });
      }
    }
    return false;
    }

PHP-файл:

<?php

    ob_start();
    $error=""; // Variable To Store Error Message
    $connection = mysqli_connect(/*credential*/);
    $tgl = $_POST['date'];
    $time = $_POST['time'];
    $lap = $_POST['lapangan'];

    //Query
    $query = mysqli_query($connection, "SELECT * FROM lapangan_book WHERE tanggal='$tgl' and jam='$time' and lapangan='$lap'");
    $rows = mysqli_num_rows($query);
    $data = mysqli_fetch_array($query);

    if($rows > 0){
        echo $data['lapangan'];
    }else{
        echo "0";
    }

?>

Вывод должен быть

Lapangan A
22lapA
22Lapangan A

Но продолжайте показывать

Lapangan A
22lapBat
22Lapangan Batminton

Answer 1

Да, это происходит из-за асинхронного поведения ajax. Есть два трюка, которые вы должны отправить асинхронный запрос по async: false, или вы должны вызвать рекурсивную функцию после успешного ответа на ajax-запрос. выдаст предупреждение в синхронном запросе ajax

        $.ajax({
          type: "POST",
          url:'get-button-avail-ajax.php',
          async:false,
          data: {
            date: document.getElementById('tgllapA').value,
            time: jamFix,
            lapangan: lap[j]
          },
          complete: function (response) {
            if(response.responseText != "0"){
              document.getElementById(lapIdFix).disabled = true;
              $('#output').html(response.responseText );
              $('#output1').html(lapIdFix);
              $('#output2').html(lapId2);
            }else{
              $('#output3').html(response.responseText);
            }
            //$('#output').html(response.responseText);*
          },
          error: function () {
              $('#output').html('ERROR!');
          },
        });
      }

Трюк 2: рекурсивная функция, это наиболее точный способ вызова

function getButtonInfo() {
    var jam = [7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22];
    var lap = ['Lapangan A','Lapangan B','Lapangan Batminton'];
    var lapId = ['lapA','lapB','lapBat'];
    var i=0;
    var j=0;
    var ajaxCall= function(){
        var lapIdFix = jam[i]+lapId[j];
        var lapId2 = jam[i]+lap[j];
        var lap1 = lap[j];
        if(jam[i] < 10){
          var jamFix = '0'+jam[i]+':00:00'; 
        }else{
          var jamFix = jam[i]+':00:00';
        }

        $.ajax({
          type: "POST",
          url:'get-button-avail-ajax.php',
          async:false,
          data: {
            date: document.getElementById('tgllapA').value,
            time: jamFix,
            lapangan: lap[j]
          },
          complete: function (response) {
            if(response.responseText != "0"){
              document.getElementById(lapIdFix).disabled = true;
              $('#output').html(response.responseText );
              $('#output1').html(lapIdFix);
              $('#output2').html(lapId2);
            }else{
              $('#output3').html(response.responseText);
            }
            //$('#output').html(response.responseText);*
            var recursiveCall=true;
            i=i+1;
            if(i>=jam.length){
                j=j+1;
                if(j>=lap.length) recursiveCall= false;
                else i=0;
            }
            if(recursiveCall===true)
            {
                 ajaxCall();
            }
          },
          error: function () {
              $('#output').html('ERROR!');
          },
        });
    }
    ajaxCall();
    return false;
}

Я написал код для вашего понимания, может быть, у вас естьвнести изменения в этот код