1

我从这段代码开始使用 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 回调函数中，但它不起作用。花了好几个小时在萤火虫中调试，终于让它工作了。有几件事导致了这个问题。

  1. 我不得不注释掉e.preventDefault();我习惯需要的东西。（现在我正在输入这个，我隐约记得我可能只包含了这行代码，因为它需要它来使用 jQuery Mobile 框架，但我不确定）。
  2. 我不得不改变正在被.serialize()'d 的变量。由于某种原因，当使用此代码提交表单时，序列化函数将始终返回一个空字符串。

这是我终于能够开始工作的修改后的代码：

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:andcomplete:方法（“方法”是正确的术语吗？）不是必需的。只是我用来更好地理解 jQuery 的 ajax 函数的东西。

所以，我有三个问题。

  1. jQuery 验证脚本是否有default需要阻止的操作？我知道它看起来并不基于我正在运行的代码，但我想看看是否有人对此有任何额外的见解。
  2. 为什么我需要更改正在被serialize()'d 的变量？当我使用.on("submit", function(e) { ...允许 $(this) 的 jQuery 触发方法时，与我通过jQuery 验证函数serialize()的方法触发 ajax 提交时有什么不同？submitHandler:
  3. 有没有更有效/更好的方法可以做到这一点？

非常感谢您的任何反馈！

4

1 回答 1

1

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

不，它没有。您可以通过检查最终处理事件的代码submit来验证这一点。你也可以写一个简单的例子来证明这一点：

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

上面的示例实际上不会发布表单，即使它是有效的。submit如果您指定submitHandler.

为什么我需要更改正在序列化（）的变量？当我使用 jQuery .on("submit", function(e) { ... 允许 $(this) 序列化()'d 的触发方法时，与我通过触发 ajax 提交时有什么不同？ submitHandler：jQuery 验证函数的方法？

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

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

有没有更有效/更好的方法可以做到这一点？

并不真地。我认为这是一种非常标准、正确的使用方式submitHandler。如果您希望 AJAX 提交代码更短一点，您可以查看jQuery 表单插件，而不是执行普通的 jQuery AJAX 调用（事实上，验证文档中的一些示例代码使用了该插件）。

于 2012-07-24T02:43:55.983 回答