jQuery在提交表單之前等待Ajax

我有三個Ajax函數，我希望在提交表單之前完成，但它們在提交時也會觸發。jQuery在提交表單之前等待Ajax

強制jQuery等待所有Ajax函數在表單發送之前完成的最佳方法是什麼？我的代碼如下：

$('form[name="regForm"]').on('submit', function() { 
    ajaxFuncOne(); 
    ajaxFuncTwo(); 
    ajaxFuncThree(); 
});

來源

2017-04-10 GTS Joe

[如何等待ajax驗證在提交表單之前完成？]（http://stackoverflow.com/questions/866654/how-to-wait-for-ajax-validation-to-complete-提交表格之前） –

由於您使用jQuery的，你應該使用.when()。那麼（）：

$.when( 
    $.ajax(/* ... */), 
    $.ajax(/* ... */) 
).then( 
    mySuccess, 
    myFailure, 
    myProgress 
);

...其中mySuccess，myFailure和myProgress是處理各功能案件。當所有延遲對象都返回成功時，通知mySuccess將被調用，但當任何延遲失敗時，將調用myFailure，而不等待其餘的完成。當它們中的任何一個已經返回成功時，將調用myProgress，但不是全部。

請參閱Deferred Object瞭解延期對象上的所有可用方法以及如何使用jQuery中的promise。

來源

2017-04-10 14:59:30

定義一個計數器變量，用於跟蹤所有函數可以訪問的範圍內有多少個Ajax函數成功。我們假設它叫做c。然後，如果不等於三則防止提交。禁用該按鈕以避免進一步點擊。

$('form[name="regForm"]').on('submit', function() { 
    if(c < 3) { 
    e.preventDefault(); 
    $(this).attr('disabled','disabled'); 
    ajaxFuncOne(); 
    ajaxFuncTwo(); 
    ajaxFuncThree(); 
    } 
});

然後在每個成功處理程序中調用以下內容。

function track() { 
    if(++c == 3) $('form[name="regForm"]').submit(); 
}

只有當三個都成功了，表單纔會被提交。

來源

2017-04-10 15:04:03 inarilo

這將導致無限循環;當調用track（）並且滿足if（++ c == 3）條件時，它確實會提交表單 - 雖然它會再次觸發on（'submit'）事件監聽器，將再次執行'e.preventDefault（）;'和ajax函數等。 – pazof

我添加了一個檢查。 – inarilo

首先停止（使用e.preventDefault();）提交，
然後換你的Ajax調用在$.when()功能，
然後提交表單。

不要忘記提交之前，取消綁定on('submit')監聽功能，否則你會在一個無限循環結束（如submit()將觸發on('submit')，這將觸發submit()，等等）。

像這樣：

$('form[name="regForm"]').on('submit', function(e) { 

    e.preventDefault(); 

    $.when(
     ajaxFuncOne(); 
     ajaxFuncTwo(); 
     ajaxFuncThree(); 
    ).done(function(){ 
     $('form[name="regForm"]').unbind('submit').submit(); 
    }); 
});

見https://api.jquery.com/jquery.when/關於$。當更多的信息（）。

來源

2017-04-10 15:17:58 pazof

jQuery在提交表單之前等待Ajax

回答

相關問題