Question

当您按下表单页面上的按钮时会重新加载。

$(document).on('click', '.share_file_form', function(event) {
    $(event.target).validate({
        submitHandler: function(form) {
            $.ajax({
                type: "POST",
                url: "http://api.server.com/share/",
                timeout: 20000,
                data: $(form).serialize(),
                beforeSend: function() {
                },
                success: function(msg){
                },
                error: function(msg){
                }
            });
        }
    });    
});

有什么问题？怎么了？有什么问题？

Answer 1

在函数末尾添加event.preventDefault();。这可以防止在完成功能后触发默认事件（即表单提交）。

$(document).on('click', '.share_file_form', function(event) {
    $(event.target).validate({
        submitHandler: function(form) {
            $.ajax({
                type: "POST",
                url: "http://api.server.com/share/",
                timeout: 20000,
                data: $(form).serialize(),
                beforeSend: function() {
                },
                success: function(msg){
                },
                error: function(msg){
                }
            });
        }
    });    

     event.preventDefault();

});

Answer 2

验证插件并没有真正起作用。您的代码看起来有点棘手，因为您将验证附加到click事件。如果你这样实现它会发生什么：

(function ($, undefined) {
    'use strict';
    function submitHandler (form) {
       $.ajax({
           type: "POST",
           url: "http://api.server.com/share/",
           timeout: 20000,
           data: $(form).serialize(),
           beforeSend: function() {},
           success: function(msg) {},
           error: function(msg) {}
       });
    }
    $(function () {
        $('.share_file_form').validate({
            submitHandler: submitHandler
        });
    });
}(jQuery));

Answer 3

引用OP ：

“出了什么问题？出了什么问题？出了什么问题？”

您的代码，代码，代码构造不正确。

$(document).on('click', '.share_file_form', function(event) {
    $(event.target).validate({
        submitHandler: function(form) {
            $.ajax({...});
        }
    });    
});

引用OP：

“当您按下表单页面上的按钮时会重新加载。”

是的，这是因为单击按钮时尚未初始化验证插件。

.validate()不是测试方法;它是插件的初始化方法。它只被称为一次，通常在DOM就绪，用于初始化表单上的插件。

您永远不需要将其包含在click事件处理程序中，因为插件已经自动捕获了每个相关的鼠标事件。

您也不得将.validate()附加到<form>对象以外的任何内容。

这是您的代码的工作版本......

$(document).ready(function() { // <-- DOM Ready event $('.share_file_form').validate({ // <-- initialize plugin on form submitHandler: function(form) { $.ajax({...}); return false; // <-- block regular submit when using ajax } }); });

DEMO：http://jsfiddle.net/Ck3sX/

重新加载AJAX jquery表单页面

3 个答案: