Jquery 多个Ajax post调用—将它们链接起来，以便仅在第一次成功后调用下一个Ajax post

这个问题试图证实我的理解，以及如何最好地解决目前的情况

在我的应用程序中，假设我有五个容器，每个容器都有自己的数据源URL

加载页面后，所有五个都需要询问服务器，检索数据并显示它

目前，页面一加载，我就为循环中的每个容器启动jquery ajax.post方法。循环立即执行，在Firebug中，我将所有这些ajax请求视为“正在处理”

现在我的理解是javascript是单线程的，所以所有这些ajax请求仍然在浏览器的执行队列中，对吗

我想要的是，即使我在一个循环中触发了所有5个ajax post请求，它也应该一个接一个地命中服务器

例如，第一次Ajax调用成功或失败-->调用第二次Ajax post--等待成功或失败，然后触发第三次Ajax post，依此类推

我不想用5个并行ajax调用攻击服务器，所以我想确认循环中所有5个容器的ajax.post不是并行操作

如果出于任何原因，某些浏览器可能会执行并行请求，那么我想实现一个简单的链接机制，我可以使用每个ajax帖子的回调函数来实现

我查看了jquery队列函数，但对同一对象的调用是q'd。在我的例子中，我需要以顺序的方式对不同的对象调用相同的函数

如果你能告诉我什么是最佳实践，以及我的假设和理解是否需要纠正

---

谢谢

Ajax代表异步JavaScript和XML。是的

<script type="text/javascript">
    $(function () {
        for (var i = 0; i < 3; i++) {               
            $.ajax({
                url: 'ajaxserverpage.aspx',
                cache: false,                   
                success: function (data) {                       
                    $("#div1").append(data);                     
                }
            });
        }
    });    
</script>

如果要禁用异步方式，可以将async属性设置为false

$.ajax({
        async: false,
        // ...
        success: function(data) {
           //do whatever with your data
        }
    });

编辑：以下是示例及其输出。

$(function () {
            for (var i = 0; i < 3; i++) {               
                $.ajax({
                    url: 'ajaxserverpage.aspx',
                    cache: false,
                    async:false,
                    success: function (data) {                       
                        $("#div1").append(data);                     
                    }
                });
            }
        }); 

HTML

<div id="div1"></div>   

让我们看看它是如何工作的

这是我的输出

当我检查firebug时，我可以看到这个。

您可以看到，我们有3个对我的服务器页面的调用，所有调用都同时启动。第二个调用并不等待第一个调用完成

案例2 我要将异步属性值设置为false。

$(function () {
            for (var i = 0; i < 3; i++) {               
                $.ajax({
                    url: 'ajaxserverpage.aspx',
                    cache: false,
                    async:false,
                    success: function (data) {                       
                        $("#div1").append(data);                     
                    }
                });
            }
        }); 

$（函数（）{
对于（var i=0；i<3；i++）{
$.ajax({
url:'ajaxserverpage.aspx'，
cache:false，
async:false，
成功：函数（数据）{
$（“#div1”）。追加（数据）；
}
});
}
}); 

结果是

firebug的结果是

您可以看到，第二个请求在第一个请求完成后启动，第三个请求在第二个请求完成后启动

---

希望这能有所帮助。

您也可以使用递归之类的方法

function chainContent(container) {
    $.ajax({
        url: container.data('url'),
        success: function(html) {
            container.html(html);
            var next = container.next();
            if (next != null) chainContent(next);
        }
    });
}

loadContent($('#container_1'));

还有HTML

<div id="container_1" data-url="load_1.htm"></div>
<div id="container_2" data-url="load_2.htm"></div>
<div id="container_3" data-url="load_3.htm"></div>

如果async=false，那么这是否意味着无论发出多少ajax post请求，它们都只会在前一个请求完成时执行？我刚刚测试了这一点，效果非常好。尽管我一次提交了所有post调用，但我看到实际的ajax调用是在FireBug中一个接一个地完成的。这正如预期的那样工作，但另一个副作用是它冻结了UI，直到所有ajax请求完成。这违背了目的。因此，我使用了一个简单的数组，将对象id存储在fifo数组中，然后使用了sfjedi提到的递归算法（略有不同），该算法调用了前一个ajax的成功或失败中的下一个ajax。感谢您，我最终实现了一个递归算法，因为第一个方法是冻结我的UI，直到所有ajax都完成。