jQuery 在提交表单之前等待 Ajax

Posted 2023-05-09

【中文标题】jQuery 在提交表单之前等待 Ajax

【英文标题】：jQuery Wait for Ajax Before Submitting Form

【发布时间】：2017-09-05 16:04:17

【问题描述】：

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

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

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

【问题讨论】：

How to wait for ajax validation to complete before submitting a form?的可能重复

【参考方案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/。

【参考方案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();

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

【讨论】：

这会导致无限循环；当track() 被调用并且if(++c == 3) 条件被满足时，它确实会提交表单——尽管它会再次触发on('submit') 事件监听器，它将再次执行e.preventDefault();，以及ajax 函数等。

我为此添加了一张支票。