重新加载AJAX jquery表单页面

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

验证插件并不是这样工作的。您的代码看起来有点难以推理，因为您正在将验证附加到单击事件。如果您像这样实现它，会发生什么：

(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

报价操作

“哪里错了？”

你的代码，你的代码，你的代码结构不正确。

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

报价OP:

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

是的，这是因为当你点击按钮时，验证插件还没有初始化。

.validate() 不是 testing 方法；它是插件的方法。它只被调用一次，通常是在DOM ready上，用来初始化表单上的插件。

您永远不需要将其封装在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
        }
    });    

});

演示：