Question

我正在使用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'）必须等到其他帖子完成。这样做的最佳方法是什么？

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) {
    $('<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()在所有正在运行的 AJAX请求完成时触发，因此只有在所有这些POST返回时才会触发，jQuery会保持计数内部（jQuery 1.5中的$.active，$.ajax.active）确定有多少同时发生的AJAX请求...当它返回0时，此事件将触发。

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

Answer 2

您总是可以使用类似

的内容使所有帖子同步


$.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) {
                    $('<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();
                        });
                });
            });
        });
    });
});

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) {
    $('<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();
    });
});

等待AJAX调用（POST）完成

4 个答案:

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

4 个答案:

等待AJAX调用（POST）完成