Question

我开始使用此代码使用jQuery ajax方法提交表单（该方法没有问题）

$( function() {
//bind an event handler to the submit event for the appointment form
    $("#idw-form").on("submit", function(e) {
//cache the form element for use in this function
    var $form = $( this );
//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
    $.post($form.attr('action'), $form.serialize(), function (responseData) {
        if (responseData == 1) {
            $.mobile.changePage( 'thank-you-dialog.html', { transition: "pop" } );
        } else {
            $.mobile.changePage( 'error-dialog.html', { transition: "pop" } );
        }
        return false;
    });
});
});

然后我想使用jQuery validate插件引入验证。我以为我应该能够将此代码放入submitHandler回调函数中，但它无法正常工作。花了几个小时来完成它，在firebug中调试并最终使它工作。有几件事导致了这个问题。

我不得不评论我曾经需要的e.preventDefault();。（现在我输入了这个，我隐约记得，也许我只包含这行代码，因为这是为了让它与jQuery Mobile Framework一起使用，但我不确定）。
我不得不更改.serialize()'的变量。由于某种原因，当使用此代码提交表单时，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 );
        }
    });
}

当然，error:和complete:方法（“方法”是正确的术语？）不是必需的。我正在用它来更好地理解jQuery的ajax函数。

所以，我有三个问题。

jQuery验证脚本是否有需要阻止的default操作？我知道它看起来不是基于我的代码工作，但我想知道是否有人对此有任何进一步的了解。
为什么我需要更改serialize()'变量？当我使用jQuery .on("submit", function(e) { ...触发方法允许$（this）为serialize()'时，与我通过submitHandler:方法触发ajax提交时的情况有什么不同jQuery验证函数？
我可以采用更有效/更好的方式吗？

非常感谢您提供任何反馈！

Answer 1

jQuery验证脚本是否有需要阻止的默认操作？我知道它看起来不是基于我的代码工作，但我想知道是否有人对此有任何进一步的了解。

不，它没有。您可以通过查看the code that ultimately handle's the submit event来验证这一点。您还可以编写一个简单的示例来证明这一点：

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

上述示例即使在有效时也不会实际发布。如果您指定submit，插件会负责阻止submitHandler事件的默认操作。

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

在submitHandler内，this引用您正在应用于表单的验证程序对象。这就是为什么$(this).serialize()没有意义，就像在事件处理程序内部那样（其中this引用事件发生的元素）。相反，您应该jQuerify传递给submitHandler的表单元素：

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

我可以采用更有效/更好的方式吗？

不是真的。我认为这是使用submitHandler的一种非常标准，正确的方法。如果你想让你的AJAX提交代码更短，你可以查看jQuery form plugin而不是做一个vanilla jQuery AJAX调用（实际上，验证文档中的一些示例代码使用该插件）。

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

1 个答案: