javascript - 在通过 Javascript 提交表单之前执行 ajax 检查

Question

我有一个用于注册新用户的简单表单。我想防止用户再次提交相同的电子邮件 ID。所以在提交表单之前，我想做一个 Ajax 检查电子邮件 ID 是否存在。如果电子邮件 ID 存在，我会提醒用户。如果没有，我让表单提交。

$("#sign_in_form").submit(function(event){ 

event.preventDefault();
$.post("http://xyz.com/check_if_user_exists", {
        email : $("#contact_person_email").val()
    }).done(function(data) {

var res = parseInt(data);
if(res==1){

//Email Exists
alert("Email exists . Please use different email " );
return false; //----------------------------1)

}else{
  //Email doesnt exist
return true;   //--------------------------- 2)
}

});

//end of function

});

此代码的问题是由于 Javascript 的异步性质，函数甚至在 ajax post 语句返回结果之前就结束了。因此 1) 和 2) 处的 return false 或 return true 语句无效。处理此问题的正确方法是什么？

Answer 1

如果检查有效则使用 js 原生事件提交表单:

$("#sign_in_form").submit(function (event) {

    event.preventDefault();
    $.post("http://xyz.com/check_if_user_exists", {
        email: $("#contact_person_email").val()
    }).done(function (data) {

        var res = parseInt(data);
        if (res == 1) {

            //Email Exists
            alert("Email exists . Please use different email ");

        } else {
            document.getElementById('sign_in_form').submit();
        }

    });

    //end of function

});