等待 AJAX 调用 (POST) 完成

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

然而，我遇到的问题是，我发布的最后一个表单必须在所有其他帖子完成后才发生。总体思路是这样的：

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

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

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

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

.ajaxStop() http://api.jquery.com/ajaxStop/当all正在运行的 AJAX 请求已完成，因此仅在以下情况下才会触发all这些 POST 已返回，jQuery 在内部保留计数（$.active, $.ajax.active在 jQuery 1.5 中）来确定有多少个并发 AJAX 请求未完成...当它回到 0 时，此事件将触发。

这种方法可以让您同时提交其他表单，然后尽快提交最终表单。