Question

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

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

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

Answer 1

首先停止提交（使用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();
    });
});

有关$ .when（）。

https://api.jquery.com/jquery.when/

Answer 2

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

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

jQuery在提交表单之前等待Ajax

2 个答案: