jQuery 在提交表单之前等待 Ajax

Question

我想在提交表单之前完成三个 Ajax 功能，但它们也会在提交时触发。

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

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

Answer 1

1. 首先停止提交（使用e.preventDefault();），
2. 然后将您的 ajax 调用包装在 $.when() 函数中，
3. 然后提交表单。

在提交之前不要忘记取消绑定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();
}

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