Php jQuery preventDefault（）在AJAX调用中不起作用

因此，当用户输入电子邮件时，我会进行检查，以查看该电子邮件是否存在

 $('form.recover-form#check-form').on('submit', function(e){

    var form    = $(this),
        input   = $('.check-recover-email'),
        span    = $('.recover-error'),
        email   = input.val();
    span.text('');
    e.preventDefault();
    $.ajax({
        url: 'ajax/check-email',
        async: 'false',
        cache: 'false',
        type: 'POST',
        data: {email: email},
        success: function(response) {
            if ( response == 'no' ) {
                span.text('email does not exist');
            } else if ( response == 'ok' ) {
                form.submit();
            }
        }
    });
});

php代码

if ( Input::isPost('email') )  {

    $email = Input::post('email');

    $check = $dbh->prepare(" SELECT * FROM users WHERE email = :email ");
    $check->execute(array( 'email' => $email ));

    echo ( $check->rowCount() == 1 ) ? 'ok' : 'no' ;

}

这样，只要我提交了它提交的表单，AJAX调用中的

e.PreventDefault（）

就不起作用了。但是，如果我将

e.PreventDefault（）

放在AJAX调用之前，表单不会提交，如果电子邮件不存在，则会出现错误（这就是我想要实现的）

我不明白问题出在哪里，希望你能帮忙

多谢各位

---

EIDT:这是更新的代码

您需要执行以下操作：

$('.recover-form').on('submit', function(e){

    e.preventDefault();

    var form    = $(this),
        input   = $('.check-recover-email'),
        span    = $('.recover-error'),
        email   = input.val();
    span.text('');
    $.ajax({
        url: 'ajax/check-email',
        async: 'false',
        cache: 'false',
        type: 'POST',
        data: form.serialize(),
        success: function(response){
            if ( response == 0 ) {
                span.text('email does not exist');
            }
        }
    });
});

---

注意我是如何将e.preventDefault（）移到开头的。这是因为您是在ajax请求响应时调用它的，该响应可能在表单提交后100毫秒甚至几秒钟内发生

您无法阻止ajax请求的成功处理程序执行默认操作，因为它是异步的

默认情况下，禁止表单提交，然后在成功处理程序中，如果表单提交有效，则再次调用提交

$('.recover-form').on('submit', function (e) {
    var form = $(this),
        input = $('.check-recover-email'),
        span = $('.recover-error'),
        email = input.val();
    span.text('');
    //prevent the submit
    e.preventDefault();
    $.ajax({
        url: 'ajax/check-email',
        async: 'false',
        cache: 'false',
        type: 'POST',
        data: form.serialize(),
        success: function (response) {
            if (response == 0) {
                span.text('email does not exist');
            } else {
                //submit if valie
                form[0].submit()
            }
        }
    });
});

---

问题是在处理事件期间，您没有调用

preventDefault

。相反，在处理事件的过程中，启动ajax调用（这是异步的），然后让事件继续。ajax调用稍后完成，这对于防止事件的默认情况来说太晚了——它已经发生了

将

e.preventDefault（）

直接移动到事件处理程序中，在ajax

success

处理程序之外

$('.recover-form').on('submit', function(e){
    var form    = $(this),
        input   = $('.check-recover-email'),
        span    = $('.recover-error'),
        email   = input.val();
    span.text('');
    e.preventDefault(); // <=================== Here
    $.ajax({
        url: 'ajax/check-email',
        async: 'false',
        cache: 'false',
        type: 'POST',
        data: form.serialize(),
        success: function(response){
            if ( response == 0 ) {
                // ============================ Not here, this would be too late
                span.text('email does not exist');
            }
        }
    });
});

---

之所以会发生这种情况，是因为为

jQuery.ajax（）

传递的成功函数是同步执行的，然后它将在事件处理程序函数完成后执行

---

您应该将

e.preventDefault（）

从ajax函数中删除。一切都会好起来的。

最好你可以试试这样的东西

<form name="myForm" onsubmit="return submitObj.validateAndSubmit();"> <!-- your form -->

<!-- your AJAX -->

var submitObj = {
  validateAndSubmit : function()
  {
    var form    = $('.recover-form'),
        input   = $('.check-recover-email'),
        span    = $('.recover-error'),
        email   = input.val();
    span.text('');
    $.ajax({
        url: 'ajax/check-email',
        async: 'false',
        cache: 'false',
        type: 'POST',
        data: form.serialize(),
        success: function(response){
            if ( response == 0 ) {
               return false;
            }
            else{
                return true;
            }
        }
    });     

  }

};

var submitObj={
validateAndSubmit:函数（）
{
var form=$（'.recover form'），
输入=$（'.检查恢复电子邮件'），
span=$（'.recover error'），
email=input.val（）；
span.文本（“”）；
$.ajax({
url:“ajax/检查电子邮件”，
异步：“false”，
缓存：“false”，
键入：“POST”，
数据：form.serialize（），
成功：功能（响应）{
如果（响应==0）{
返回false；
}
否则{
返回true；
}
}
});     
}
};

首先，您的选项不正确<代码>缓存和

异步

需要布尔值，而不是字符串

async: false,
cache: false,

其次，不是在ajax请求之后提交表单，而是触发事件。试试这个

form.get(0).submit();

它返回表单节点而不是jquery对象，允许您直接提交它，而不是触发事件（否则您将有一个无限循环）

---

在这种情况下，您实际上不需要

async:false

或

cache:false

。

由于ajax请求的异步性质，您不能这样做…只需将其保持在请求之外，就像您正在做的那样..e.preventDefault（）；不工作，因为ajax是异步调用。请进行ajax同步或使用回调来实现这一点。这里的流程有点混乱。实际发生的情况是，他们向用户提交表单，从而触发在后台运行的ajax请求。当该请求返回时，您尝试取消submit事件，但为时已晚，它早就完成了。是的，我知道preventDefault（）在ajax调用中不起作用，但如果我在ajax调用之前将其上移，如果ajax调用成功，我如何恢复提交并继续提交表单？我尝试了这个方法，但现在我总是收到错误消息，好像我输入的电子邮件总是错误的（事实并非如此）。只有一个问题，在else块中提交表单并不意味着它总是会遇到e.preventDefault（），因此永远不会提交？@C.Ovidiu不，以这种方式提交不会触发事件处理程序。@Karl AndréGagnon它也不起作用。现在，我总是得到错误消息，这意味着if（response==0）if总是true。服务器端代码良好，我正在检查的电子邮件存在。@C.Ovidiu检查

响应的值。

@ArunPJohny我在那里占75%。我检查了所有内容，如果电子邮件存在，则会删除错误，但表单保持不变，不会提交。我将在OPYes中发布更新的代码，它可以用于验证，但是如果ajax响应返回肯定响应，我希望提交表单。我只使用AJAX进行检查，如果失败，停止提交，如果成功，继续提交。这样，它可以工作，也不会提交，但是如果电子邮件存在，我想提交表单，如果（response==1）。是的，它可以用于验证，但是如果AJAX返回肯定的响应，我想提交表单。我只使用AJAX进行检查，如果失败，停止提交，如果成功，继续提交。@C.Ovidiu：要使用异步AJAX请求进行检查，您必须停止表单提交，进行检查，如果检查正常，则改为以编程方式提交表单。（表单的原始DOM元素上的

submit

函数在不触发

submit

处理程序的情况下提交表单。）但是，既然在执行检查时正在序列化表单，为什么不在处理ajax调用时直接处理它呢？最后，我就这么做了，基本上需要发送一封恢复电子邮件，我想首先检查数据库中是否存在该电子邮件。编程提交对我不起作用，如果你检查@Arun answer，他已经建议了。@C.Ovidiu:：-）同时，我添加了一个示例。“程序提交对我不起作用”为什么不？我不知道原因。检查ajax响应是否正常，是否会相应地显示错误消息，但表单不会提交。我在e

form.get(0).submit();