等待AJAX​​调用（POST）完成

我正在使用jQuery UI选项卡，其中每个选项卡上都有不同的表单。 在用户输入各种数据后，他们提交整个选项卡集，以便每个选项卡异步发布到服务器。 这很好用，我在这里没有问题。

但是，遇到问题的是，我发布的最后一个表单必须在所有其他post完成之后发生。 一般的想法是这样的：

postForm(0, "#Form1"); postForm(1, "#Form2"); postForm(2, "#Form3"); postForm(3, "#Form4"); $.post('Project/SaveProject', function (data) { $('
The current project has been saved.
') .insertAfter($('#tabs')) .fadeIn('slow') .animate({ opacity: 1.0 }, 3000) .fadeOut('slow', function () { $(this).remove(); }); }); 

postForm函数进行一些处理，然后进行AJAX $ .post调用。 此处执行的最后一个$ .post（到’Project / SaveProject’）必须等到其他post完成。 这样做的最佳方法是什么？

Answer 1

您可以使用在所有其他AJAX POST完成时触发的.ajaxStop()事件，假设您当时没有执行其他AJAX工作，如下所示：

 postForm(0, "#Form1"); postForm(1, "#Form2"); postForm(2, "#Form3"); postForm(3, "#Form4"); $(document).ajaxStop(function() { $.post('Project/SaveProject', function (data) { $('
The current project has been saved.
') .insertAfter($('#tabs')) .fadeIn('slow') .animate({ opacity: 1.0 }, 3000) .fadeOut('slow', function () { $(this).remove(); }); }); $(this).unbind('ajaxStop'); }); 

当所有正在运行的AJAX请求完成时， .ajaxStop()会触发，因此只有在所有这些POST都返回后才会触发，jQuery在内部保持计数（ $.active ， $.ajax.active在jQuery 1.5中）以确定如何许多同时发生的AJAX请求非常出色…当它返回0时，此事件将触发。

这种方法允许您同时执行其他表单提交，并在之后尽快完成最终表单。

Answer 2

您总是可以使用类似的内容使所有post同步

 $.ajax({ type: "POST", async: false, url: "", ... 

当然它不会那么快但如果$（document）.ajaxStop不是一个选项，它确实解决了你的问题

Answer 3

回调：

定义postForm以进行回调：

 function postForm(ind, id, callback) { // ... $.post(url, function() { // ... callback(); }); } 

然后做类似下面的事情。 您可以使用递归以较不硬编码的方式编写它，如果有更多表单，这可能特别有用。

 postForm(0, "#Form1", function() { postForm(1, "#Form2", function() { postForm(2, "#Form3", function() { postForm(3, "#Form4", function() { $.post('Project/SaveProject', function (data) { $('
The current project has been saved.
') .insertAfter($('#tabs')) .fadeIn('slow') .animate({ opacity: 1.0 }, 3000) .fadeOut('slow', function () { $(this).remove(); }); }); }); }); }); }); 

Answer 4

ajaxStop的问题在于每次完成任何ajax时它都会触发。 另一种方法是实现自己的方法堆栈，如下所示：

 var stack = [] postForm(var1, var2){ stack.push(1); //Do postForm stuff stack.pop(); if (stack == undefined){ //Call the last post method } } postForm(0, "#Form1"); postForm(1, "#Form2"); postForm(2, "#Form3"); postForm(3, "#Form4"); $.post('Project/SaveProject', function (data) { $('
The current project has been saved.
') .insertAfter($('#tabs')) .fadeIn('slow') .animate({ opacity: 1.0 }, 3000) .fadeOut('slow', function () { $(this).remove(); }); });