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

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

您可以只使用.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()火災時，所有正在運行完成的AJAX請求，所以它只會在所有的這些POST返回時觸發，jQuery在內部保留一個計數（$.active,$.ajax.active在jQuery 1.5中）以確定同時發生的多個AJAX請求任務非常好......當它回到0時，這個事件就會發生。

這種方法可以讓你同時完成其他表單提交，並在之後儘快完成最終表單。

Answer 2

回調：

定義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 3

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

Answer 4

你總是可以讓所有的帖子同步使用類似

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

當然，這不會是一樣快的

，但如果它不解決您的問題$（document）.ajaxStop不是一個選項