jQuery在提交表单之前等待Ajax

问题描述：

我有三个Ajax函数，我希望在提交表单之前完成，但它们在提交时也会触发。jQuery在提交表单之前等待Ajax

强制jQuery等待所有Ajax函数在表单发送之前完成的最佳方法是什么？我的代码如下：

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

[如何等待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。

答

定义一个计数器变量，用于跟踪所有函数可以访问的范围内有多少个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(); 
}

只有当三个都成功了，表单才会被提交。

这将导致无限循环;当调用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/关于$。当更多的信息（）。

jQuery在提交表单之前等待Ajax

相关推荐