Question

我有一个页面试图通过jQuery连续运行3个单独的ajax调用。不幸的是，每次加载页面时，只会运行两个ajax调用。此外，3个调用中的哪个将运行并不一致。

这是jQuery代码（在order.php页面上）：

$.ajax({
       type: "Post",
       url: "includes/get_product_info.php",
       data: "id=7",
       success: function(data) {
             console.log('First One Works!');
       }
});

$.ajax({
      type: "Post",
      url: "includes/get_product_info.php",
      data: "id=6",
      success: function(data) {
            console.log('Second One Works!');
      }
});

$.ajax({
      type: "Post",
      url: "includes/get_product_info.php",
      data: "id=1",
      success: function(data) {
            console.log('Third One Works!');
      }
});

这是PHP脚本（get_product_info.php）：

include("connection.php");
$conn = dbConnect('query');

$sql = 'SELECT *  
        FROM products
        WHERE product_id = ' . $_POST['id'];

$result = $conn->query($sql) or die(mysqli_error($conn));
$rows = array();

while($row = $result->fetch_assoc()) {
  $rows[] = $row;
}

echo json_encode($rows);

当我不时加载order.php页面时，有时它会说'First One Works'和'Second One Works'，但有时会说'Third One works'和'First One works'等等。这表明，它每次只运行两次ajax调用，它们随机运行。

如何以正确的顺序运行所有三个ajax调用？

Answer 1

您可以在ajax调用中设置async：false，如：

$.ajax({
       type: "Post",
       url: "includes/get_product_info.php",
       data: "id=7",
       async: false,
       success: function(data) {
             console.log('First One Works!');
       }
});

它会按顺序执行所有操作，但async：false会杀死ajax的目的。

修改

或者你可以使用ajax队列插件。

来自文档：

此插件创建一个新方法，确保一次只运行一个AJAX请求。在使用jQuery的内置队列开始新的请求之前，它等待先前的请求完成。

https://github.com/gnarf37/jquery-ajaxQueue

Answer 2

这是一种不同的方法......

你能否将它们合并为一个电话？

jQuery的：

$.ajax({
       type: "Post",
       url: "includes/get_product_info.php",
       data: "id[]=7&id[]=6&id[]=1",
       success: function(data) {
           // just an example of what to do here
           $(data).appendTo('body');
       }
});

PHP：

include("connection.php");
$conn = dbConnect('query');

$sql = 'SELECT *  
        FROM products
        WHERE product_id IN(' . implode(',', $_POST['id']) .')';

$result = $conn->query($sql) or die(mysqli_error($conn));
$rows = array();

while($row = $result->fetch_assoc()) {
  $rows[] = $row;
}

echo json_encode($rows);

Answer 3

最好将每个调用包装在自己的函数中，然后，你应该在之前的回调中调用每个连续的AJAX调用，所以...

function one(){
  $.ajax({
    etc...
    success : two
  });
}
function two(){
  $.ajax({
    etc...
    success : three
  });
}
function three(){
  etc...
}

您不需要包装功能one,two,three...，但它看起来更好，意味着您可以重复使用它们。

Answer 4

也许是因为jQuery.ajax（）

执行异步HTTP（Ajax）请求。

您可以尝试添加async：fasle（默认值：true）但请记住，它已折旧为documentation stats

从jQuery 1.8开始，使用async：false和jqXHR（$ .Deferred）弃用;您必须使用success / error / complete回调选项而不是jqXHR对象的相应方法，如 jqXHR.done（）或不推荐使用的jqXHR.success（）。

使用always（）来调用下一个ajax调用：

$.ajax({
       type: "Post",
       url: "includes/get_product_info.php",
       data: "id=7",
       success: function(data) {
             console.log('First One Works!');
       }
}).always( function() {
$.ajax({
      type: "Post",
      url: "includes/get_product_info.php",
      data: "id=6",
      success: function(data) {
            console.log('Second One Works!');
      }
});
} ).always( function() { ... ;

Answer 5

您应该使用callback发送有序的异步请求。

// default callback function
var noop = function(){}

$.ajax({
    // other parameters
    success: function(res1){
       secondRequest(function(res2){
         thirdRequest(function(res3){
            console.log("finished");
         })
      });
    }
});


function secondRequest(callback) {
    $.ajax({
           // other parameters
           success:callback || noop
    });
}


function thirdRequest(callback) {
    $.ajax({
           // other parameters
        success:callback || noop
    });
}

Const：使用回调方法，我们编写嵌套的回调函数，这样在完成第一次请求之前就不能向服务器发送第二个请求。

也可能想要查看deferred。

为什么我不能连续运行两个以上的jQuery ajax调用？

5 个答案: