jQuery在提交表单之前等待Ajax

时间:2017-04-10 14:38:34

标签: jquery ajax

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

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

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

2 个答案:

答案 0 :(得分:1)

  1. 首先停止提交(使用e.preventDefault();),
  2. 然后将您的ajax调用包装在$.when()函数
  3. 然后提交表格。
  4. 在提交之前不要忘记解除绑定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();
        });
    });
    

    有关$ .when()。

    的更多信息,请参阅https://api.jquery.com/jquery.when/

答案 1 :(得分:0)

在所有函数可访问的范围内,定义一个计数器变量,用于跟踪已成功的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();
}

只有当这三个都成功时,才会提交表格。