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

时间:2015-08-04 08:27:05

标签: jquery ajax forms validation submit

您将如何执行ajax调用并在submit() - codeblock中收到响应?(以适当的方式)

如果您的表单中包含提交事件,则可以在验证时执行此操作

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

我对ajax-call或响应没有问题但是我不确定如何在不使用async的情况下实现返回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) {陷入了递归循环。

1 个答案:

答案 0 :(得分:1)

处理此问题的方法是始终在submit事件中返回false,然后在captcha 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元素的submit方法,而不是jQuery提交处理程序。