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 A22lapA22Lapangan A

Answer 1

是的，这是因为 ajax 的 Asyncroniouse 行为。您必须通过两种技巧发送异步请求，async: false或者您必须在 ajax 请求成功响应后调用递归函数。

Trick 1-aysnc: 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!');

          },

        });

      }

技巧二：递归函数，这是最准确的调用方式

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;

}

我已经编写了代码供您理解可能是您必须在此代码中进行修改