如何以正确的方式处理 submit() 中的 ajax 响应？

Posted 2023-05-08

【中文标题】如何以正确的方式处理 submit() 中的 ajax 响应？

【英文标题】：How to handle ajax response within a submit() in a proper way?

【发布时间】：2015-10-26 13:31:47

【问题描述】：

您将如何执行 ajax 调用并在 submit() - 代码块中接收响应？（以适当的方式）

如果你有一个带有提交事件的表单，你可以在验证时这样做

/* contact page */
$(".contactform").submit(function(e) 

    var companyfield = $(this).find(".companyfield").val();
    if (parseInt(companyfield) === 0 || !companyfield)      
        return false;
    

    return true; //Do submit form

现在我必须在我的验证（recaptcha）中包含来自服务器（ajax 调用）的响应，但是由于 ajax 调用是异步执行的，即使来自服务器的响应不是预期的，也会提交表单，因为函数在 ajax 调用完成之前返回 true。

我对 ajax 调用或响应没有任何问题，但我不确定如何在不使用 async: false 的情况下实现返回 true、false。

我基本上想要这样的东西：

/* contact page */
$(".contactform").submit(function(e) 

    var companyfield = $(this).find(".companyfield").val();
    if (parseInt(companyfield) === 0 || !companyfield)      
        return false;
    

   var recaptchafield_is_valid = response from server (ajax-call)
   if (recaptchafield_is_valid  === false) 
       return false;
   

    return true; //Do submit form

我也试过$.when()，但是表单也提交了，因为没有设置true或false，表单提交正常。

我也尝试过使用 e.preventDefault() 然后 $(".contactform").submit() 成功但随后$(".contactform").submit(function(e) 陷入递归循环。

【问题讨论】：

如果你想使用 ajax 那你为什么要提交表单？

@Jai - 表单被提交到另一个处理表单值的域。因此我需要通过 ajax 重新验证。

【参考方案1】：

处理这个问题的方法是在提交事件中始终返回 false，然后在验证码 ajax 调用的成功事件中，以编程方式提交表单，绕过提交事件处理程序。

$(".contactform").submit(function(e) 
    var form = this;

    var companyfield = $(this).find(".companyfield").val();
    if (parseInt(companyfield) === 0 || !companyfield)      
        return false;
    

    // do the ajax
    $.ajax(
        url : '...',
        success : function()
            // if the captcha is good, submit the form
            form.submit();
        
    );

    return false;

注意：form.submit() 正在调用 DOM 元素的提交方法，而不是 jQuery 提交处理程序。