在.each（）循环中使用ajax

Question

我正在尝试在tr的循环中使用ajax。

继承我的代码：

var i=0;
$("tr").each(function() {
var row = datastring;
console.log("I = " + i);
$.ajax({
    type: 'POST',
    url: 'somelinkgoeshere.com',
    data: row,
    success: function(){console.log("Success")},
    error: function(){console.log("Error")}
});
i++;
});​

预期结果

所以我希望触发事件，以便console.log必须按照命令返回日志：

1. I = 0
2. 成功或错误
3. I = 1
4. 成功或错误

实际结果

但是在运行代码之后，console.log按以下顺序返回日志

1. I = 0
2. I = 1
3. 成功或错误
4. 成功或错误

所以这意味着我的每个循环完成后调用我的ajax函数。但我不希望函数循环，除非ajax请求竞争。

如果您需要更多解释，请与我们联系。

感谢。

Answer 1

如上所述，Ajax是异步的。这意味着其他函数和代码可以同时运行，这样做的好处是浏览器在继续执行页面JS之前不必等待请求完成。想象一下，如果您在页面上有十几个Ajax请求，而一台服务器需要30秒才能响应，那会是什么样子......

但是，如果您仍想同步运行请求，可以将async标记设置为false：

var i = 0;
$("tr").each(function() {
    var row = datastring;
    console.log("I = " + i);
    $.ajax({
        type: 'POST',
        url: 'somelinkgoeshere.com',
        data: row,
        async: false,
        success: function() {
            console.log("Success")
        },
        error: function() {
            console.log("Error")
        }
    });
    i++;
});​

P.S。您无需手动增加i，jQuery的.each()可以提供它：

$("tr").each(function(i) {
    var row = datastring;
    console.log("I = " + i);
    $.ajax({
        type: 'POST',
        url: 'somelinkgoeshere.com',
        data: row,
        async: false,
        success: function() {
            console.log("Success")
        },
        error: function() {
            console.log("Error")
        }
    });
});​

Answer 2

您必须将async设置为false。

$.ajax({
    type: 'POST',
    url: 'somelinkgoeshere.com',
    async: false,
    data: row,
    success: function(){console.log("Success")},
    error: function(){console.log("Error")}
});

这不是最好的事情，因为它可能会锁定浏览器，而AJAX的重点是异步。

Answer 3

使用async=false。

以下是jQuery文档的引用：

  

asyncBoolean默认值：true默认情况下，发送所有请求   异步（即默认设置为true）。如果你需要   同步请求，将此选项设置为false。跨域请求   和dataType：“jsonp”请求不支持同步操作。   请注意，同步请求可能会暂时锁定浏览器，   在请求处于活动状态时禁用任何操作。从jQuery 1.8开始，   不推荐使用async：false和jqXHR（$ .Deferred）;您   必须使用完整/成功/错误

或回调。