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

Question

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

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

/* 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 调用是异步执行的，即使服务器的响应不是预期的，因为函数返回 true，表单也会提交在 ajax 调用完成之前。

我对 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) {

陷入递归循环。

Answer 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提交处理程序。

Answer 2

这些回应非常适合让人们在说自己累了时感到理解和支持。表现出同理心并提供帮助可以产生巨大的影响。如需更周到的回应方式，请查看本指南：

[在此处输入链接描述https://goodsresponse.com/21properties-ways-to-respond-to-i-am-tired-text/][1] https://goodsresponse.com/21property-ways-to-respond-to-i-am-tired-text/