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

Answer 1

是的，这是因为 ajax 的 Asyncroniouse 行为。您必须通过两种技巧发送异步请求，async: false或者您必须在 ajax 请求成功响应后调用递归函数。Trick 1-aysnc: false在ajax请求中传递选项，但是有些浏览器会在ajax的同步请求中抛出警告&nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: "POST",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url:'get-button-avail-ajax.php',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; async:false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; date: document.getElementById('tgllapA').value,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; time: jamFix,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; lapangan: lap[j]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; complete: function (response) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(response.responseText != "0"){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById(lapIdFix).disabled = true;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#output').html(response.responseText );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#output1').html(lapIdFix);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#output2').html(lapId2);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#output3').html(response.responseText);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //$('#output').html(response.responseText);*&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#output').html('ERROR!');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; }技巧二：递归函数，这是最准确的调用方式function getButtonInfo() {&nbsp; &nbsp; var jam = [7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22];&nbsp; &nbsp; var lap = ['Lapangan A','Lapangan B','Lapangan Batminton'];&nbsp; &nbsp; var lapId = ['lapA','lapB','lapBat'];&nbsp; &nbsp; var i=0;&nbsp; &nbsp; var j=0;&nbsp; &nbsp; var ajaxCall= function(){&nbsp; &nbsp; &nbsp; &nbsp; var lapIdFix = jam[i]+lapId[j];&nbsp; &nbsp; &nbsp; &nbsp; var lapId2 = jam[i]+lap[j];&nbsp; &nbsp; &nbsp; &nbsp; var lap1 = lap[j];&nbsp; &nbsp; &nbsp; &nbsp; if(jam[i] < 10){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var jamFix = '0'+jam[i]+':00:00';&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; }else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var jamFix = jam[i]+':00:00';&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: "POST",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url:'get-button-avail-ajax.php',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; async:false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; date: document.getElementById('tgllapA').value,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; time: jamFix,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; lapangan: lap[j]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; complete: function (response) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(response.responseText != "0"){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById(lapIdFix).disabled = true;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#output').html(response.responseText );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#output1').html(lapIdFix);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#output2').html(lapId2);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#output3').html(response.responseText);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //$('#output').html(response.responseText);*&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var recursiveCall=true;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; i=i+1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(i>=jam.length){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; j=j+1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(j>=lap.length) recursiveCall= false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else i=0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(recursiveCall===true)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;ajaxCall();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#output').html('ERROR!');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }&nbsp; &nbsp; ajaxCall();&nbsp; &nbsp; return false;}我已经编写了代码供您理解可能是您必须在此代码中进行修改