无法停止打开Action目标来提交AJAX表单

Question

我基本上复制了我在网站上运行的完整表单提交代码，然后将其粘贴到空白文件中，以修改其内容并节省一些时间。 从理论上讲，如果原始文件在继续完成提交的同时停止了打开动作目标文件的正常表单提交，则该文件应该执行相同的操作。

但是，我无法像它那样正常工作。 我无法阻止提交内容离开当前窗口。

谁能指出我做错了什么？

（除了PHP代码之外，我正在使用jQuery Validation插件，与我在以前的表格中使用的一样，可以正常工作。）

表单HTML代码：

<form id="form" class="appintro" method="post" action="manageform.php" enctype="multipart/form-data"></form>

JS

$.validator.setDefaults({
    submitHandler: function() { //<-- Handler called by jQuery Validation once form is validated
        $('.msg.sending').fadeIn(200);
        $.ajax({
            type: 'POST',
            url: form.attr('action'),
            data: form.serialize(),
            success: function() {
                alert('Success')
    },
            error: function() {
                alert('Failure')
            }
        });
        return false; //<-- This should stop the normal submission...
    }
});

我也已经尝试过在validator代码之外调用AJAX，即使用$("form").submit(function(event)...等。）还尝试将data设置为form.serializeArray() ，如推荐的那样。其他一些帖子...什么也没做。

在此先感谢您的帮助！

编辑1

我已经设置了这个jsFiddle以在一个简单的版本中对其进行测试。 无论我在AJAX的url放置什么，都会收到错误消息。 如果我填写表单的action ，那么我将无法捕获提交内容。

Answer 1

编辑2好的，同时修复了我的js小提琴版本中的一些错误，我发现了问题所在。

该行缺少form参数

submitHandler: function() { 

它看起来应该像这样：

submitHandler: function(form) { 

接下来，要调用序列化，您需要将其包装为一个jquery对象。 jquery validate传递的表单只是一个常规表单对象，而不是jquery一个。 因此，您需要执行此操作。

data: $(form).serialize(),

如果调用form.serialize ，则应在Chrome中出现以下错误： Uncaught TypeError: Object #<HTMLFormElement> has no method 'serialize' ，这可以解释为什么重新加载浏览器。

编辑1我看了你的小提琴，发现了一些错误，但是我不确定它们是否可以解决您的问题。 我觉得我只是修复了一些特定于jsfiddle的错误。

这是一个有效的更新小提琴的链接： http : //jsfiddle.net/JSuUL/6/

这是带有一些注释的代码

$.validator.setDefaults({
    // Need to pass in form variable
    submitHandler: function (form) {
        alert('Sending...')
        $.ajax({
            type: 'POST',

            // First off changed this to make the request work
            // http://doc.jsfiddle.net/use/echo.html
            url: '/echo/html/',

            // Instead of form, I used $(form) to reference the form as a jquery object.
            data: $(form).serialize(),

            success: function () {
                alert('Success!')
            },
            error: function () {
                alert('Failure!')
            }
        });
        return false;
    }
});

$(document).ready(function () {
    // I added a "#" here so we can grab the form. Your jsfiddle had $(form)
    $("#form").validate({
        rules: {
            name: {
                required: true,
                minlength: 2
            },
            surname: {
                required: true,
                minlength: 2
            },
        }
    });
});