3

我有一个页面试图通过 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 有效”和“First One 有效”等。这表明，它只运行每次调用两个ajax，它们是随机的，它将运行哪些。

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

4

5 回答 5

3

您可以在 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

于 2013-04-03T07:25:19.433 回答
3

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

你不能把它们合并成一个电话吗？

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);
于 2013-04-03T07:30:04.713 回答
1

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

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

您不需要包装函数one,two,three...，但它看起来更好，并且意味着您可以重用它们。

于 2013-04-03T07:32:39.600 回答
0

也许是因为 jQuery.ajax()

执行异步 HTTP (Ajax) 请求。

您可以尝试添加 async: fasle （默认值：true），但请记住，它已作为文档统计信息贬值

从 jQuery 1.8 开始，不推荐在 jqXHR ($.Deferred) 中使用 async: false ；您必须使用成功/错误/完成回调选项而不是 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() { ... ;
于 2013-04-03T07:31:00.507 回答
0

您应该使用 use 发送有序的异步请求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 ：使用回调方法，我们正在编写嵌套的回调函数，因此您不能在完成第一个请求之前向服务器发送第二个请求。

也可能想看 延期也。

于 2013-04-03T08:22:39.550 回答