Ajax 已发出请求，但由于数组不断变化，返回的响应中值的位置不断变化。我该如何解决

Question

我有一个脚本，它通过 Ajax 将一组数字发送到网络服务器。

这些值用于查询数据库，然后 table 中那些数字的相应值被发回，然后我将其发送到我的 html 文件中的相应 div

见下文。

function getData() {

  var faq_get = Array("1", "2", "3");


  var faq_async_request = [];
  var responses = [];
  for (i in faq_get) {
    // you can push  any aysnc method handler
    faq_async_request.push($.ajax({
      url: "https://###########.com/data/data.php", // your url
      method: "post", // method GET or POST
      data: {
        mid: faq_get[i]
      },
      success: function (data) {
        console.log("success of ajax response");
        responses.push(data);
        
      }
    }));
  }

  $.when.apply(null, faq_async_request).done(function () {
    // all done
    console.log("all request completed");
    console.log(responses);

    $("#3").html(responses[2]);
    $("#2").html(responses[1]);
    $("#1").html(responses[0]);
  });
}

PHP 下面的脚本

 $fig = $_POST['mid']; 

$sql = "SELECT * from data where id = '$fig'";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
  // output data of each row
  while($row = $result->fetch_assoc()) {
    echo $row["scores"];
  }
 }

我的 Ajax 脚本发送这些数据并按我的需要接收响应，但我有一个小问题。值的位置会不时交换。

请看下图

Answer 1

您需要在 $.when 回调中处理响应，以便按发送顺序处理它们，而不是在收到响应时处理它们。

function getData() {

  var faq_get = Array("1", "2", "3");

  var faq_async_request = faq_get.map(id => $.ajax({
    url: "https://###########.com/data/data.php", // your url
    method: "post", // method GET or POST
    data: {
      mid: id
    }
  }));

  $.when(...faq_async_request).done(function(...responses) {
    // all done
    console.log("all request completed");
    responses = responses.map(resp => resp[0]); // get the first value from each promise
    console.log(responses);

    $("#3").html(responses[2]);
    $("#2").html(responses[1]);
    $("#1").html(responses[0]);
  });
}

Ajax 已发出请求，但由于数组不断变化，返回的响应中值的位置不断变化。我该如何解决

Ajax request made but position of value in returned response as array keeps changing. how do I fix this

javascript

php

ajax

jquery-deferred