编写jquery验证ajax提交的更好方法

我从使用jQueryAjax方法提交表单的代码开始（该方法可以正常工作）

然后我想介绍使用jQuery验证插件的验证。我想我应该能够把这段代码放到submitHandler回调函数中，但它不起作用。花了几个小时的时间在firebug中进行调试，最终使其正常工作。有几件事导致了这个问题

我不得不注释掉

e.preventDefault（）我已经习惯了。（现在我正在键入这段代码，我隐约记得，可能我只包含了这行代码，因为这是使用jQuery Mobile Framework时所需要的，但我不确定）

我必须更改

.serialize（）

'd中的变量。由于某种原因，当表单与此代码一起提交时，serialize函数将始终返回空字符串

以下是我最终能够使用的修订代码：

submitHandler: function(form) {
    formObj = $( '#' + form.id );
    var replaceDiv = $( '#main-content' );
    //prevent the default submission of the form
    //e.preventDefault();
    //run an AJAX post request to your server-side script, $this.serialize() is the data from your form being added to the request
    $.ajax({
        type: 'POST',
        url: '/scripts/idw-mail-handler.php',
        dataType: 'json',
        data: formObj.serialize(),
        success: function(responseData, responseStatus, responseXml){
            console.log( 'responseData is: ' + responseData );
            console.log( 'responseStatus is: ' + responseStatus );
            console.log( 'responseXML is: ' + responseXml );
            replaceDiv.hide();
            if (responseData.sentStatus == 1) {
                replaceDiv.before(responseData.successMessage);
                $('html, body').animate({
                    scrollTop: 0
                }, 300);
                console.log( 'sentStatus equals: ' + responseData.sentStatus );
            } else {
                replaceDiv.before(responseData.errorMessage);
                $('html, body').animate({
                    scrollTop: 0
                }, 300);
                console.log( 'sentStatus equals something other than 1: ' + responseData.sentStatus );
            }
        },
        error: function(errorXml, errorStatus, errorError){
            console.log( 'ErrorXml is: ' + errorXml );
            console.log( 'errorStatus is: ' + errorStatus );
            console.log( 'errorError is: ' + errorError );
        },
        complete: function(completeXml, completeStatus){
            console.log( 'completeXML is: ' + completeXml );
            console.log( 'completeStatus is: ' + completeStatus );
        }
    });
}

当然，

错误：

和

完成：

方法（“方法”是正确的术语吗？）。这是我用来更好地理解jQuery的ajax函数的

所以，我有三个问题

jQuery验证脚本是否有需要防止的

默认操作？我知道它看起来并不是基于我正在工作的代码，但我想看看是否有人对此有更多的见解

为什么我需要更改正在序列化（）的变量？当我使用jQuery

.on（“submit”，函数（e）{…

方法触发时，允许$（this）被

序列化（）

'd，与通过jQuery验证函数的

submitHandler:

方法触发ajax提交时有什么不同

有没有更有效/更好的方法可以让我这样做

非常感谢您的反馈

jQuery验证脚本是否有需要阻止的默认操作？我知道它看起来并不是基于我正在工作的代码，但我想看看是否有人对此有任何其他见解

不，没有。您可以通过签出来验证这一点。您还可以编写一个简单的示例来证明这一点：

$("#myform").validate({
    submitHandler: function (form) {
        console.log('hi');
    }
});

上面的例子即使在表单有效的情况下也不会发布表单。如果您指定了

submitHandler

，插件会防止

submit

事件的默认操作

为什么我需要更改正在序列化（）的变量？ 当我使用jQuery.on（“提交”）时有什么不同， 函数（e）{…允许$（this）执行的触发方法 serialize（）'d，vs当我通过 submitHandler：jQuery验证函数的方法

在

submitHandler

内部，

this

引用您正在应用于表单的验证程序对象。这就是为什么

$（this）.serialize（）

不像在事件处理程序内部那样有意义（其中

this

引用事件发生时的元素）。相反，您应该jquery传递给

submitHandler

的表单元素：

$("#myform").validate({
    submitHandler: function (form) {
        var serialized = $(form).serialize();
    }
});

有没有更有效/更好的方法可以让我这样做

不完全是。我认为这是一种非常标准、正确的使用

submitHandler

的方法。如果您希望AJAX提交代码稍微短一点，您可以查看，而不是执行普通的jQuery AJAX调用（事实上，文档中的一些示例代码使用该插件）

jQuery验证脚本是否有需要阻止的默认操作？我知道它看起来并不是基于我正在工作的代码，但我想看看是否有人对此有任何其他见解

不，没有。您可以通过签出来验证这一点。您还可以编写一个简单的示例来证明这一点：

$("#myform").validate({
    submitHandler: function (form) {
        console.log('hi');
    }
});

上面的例子即使在表单有效的情况下也不会发布表单。如果您指定了

submitHandler

，插件会防止

submit

事件的默认操作

为什么我需要更改正在序列化（）的变量？ 当我使用jQuery.on（“提交”）时有什么不同， 函数（e）{…允许$（this）执行的触发方法 serialize（）'d，vs当我通过 submitHandler：jQuery验证函数的方法

在

submitHandler

内部，

this

引用您正在应用于表单的验证程序对象。这就是为什么

$（this）.serialize（）

不像在事件处理程序内部那样有意义（其中

this

引用事件发生时的元素）。相反，您应该jquery传递给

submitHandler

的表单元素：

$("#myform").validate({
    submitHandler: function (form) {
        var serialized = $(form).serialize();
    }
});

有没有更有效/更好的方法可以让我这样做

---

不完全是。我认为这是一种非常标准、正确的使用

submitHandler

的方法。如果您希望AJAX提交代码稍微短一点，您可以查看，而不是执行普通的jQuery AJAX调用（事实上，文档中的一些示例代码使用该插件）.

谢谢安德鲁。非常乐于助人，非常感谢。谢谢安德鲁。非常乐于助人，非常感谢。