使用 jQuery ajax post 覆盖表单提交事件答案

【问题标题】：Override form submit event with jQuery ajax post使用 jQuery ajax post 覆盖表单提交事件
【发布时间】：2015-05-01 22:31:01
【问题描述】：

我认为我正确地覆盖了表单提交。但是，我得到的是 POST 的 json 字符串，而不是 done 事件中的 //HIDE FORM（如果提交按钮在表单之外，它可以正常工作，但我在表单中需要它）。

表格

@using(Html.BeginForm("Action", "Controller", FormMethod.Post, new{})
{
    //Form inputs
    <button type="submit" class="button-submit">Submit</button>
}

脚本（在 init() 中）：

$('.button-submit').bind('submit', function(e) {
    e.preventDefault();

    if (formIsValid) {
        $.ajax({
            url: 'controller/action',
            type: 'POST',
            data: form.serialize()
        }).done(function(data) {
            if (data.success) {
                //HIDE FORM
            } else {
                //error
            }
        });
    }
    return false;
});

在控制器中

[HttpPost]
public JsonResult Action(Model model)
{
    if (ModelState.IsValid)
    {
        //Code...
    }
    return Json(model);
}

如何将提交按钮保留在表单中，使用 ajax post 并返回隐藏表单并保持在同一页面上？

【问题讨论】：

而不是绑定.bind('submit'... 我会做.on('click'...。不完全确定它是否有帮助:)
你到底在问什么？如何隐藏表单？
@Mackan 完全有帮助。我查到的一个问题是对.bind('submit'... 说的。我现在感觉很笨，但谢谢你。你能发布答案，也许为什么这需要.on('click'...？
@ajRichardson 我使用 jQuery 来隐藏表单。 ajax 请求将我带到一个带有 json 结果的新 url。我想保持在同一页面上。 .on('click'... 解决了我的问题。
@mackan 是的。 $(function() { Namespace.init(); }); ajax 请求在init() 内。

标签： jquery ajax asp.net-mvc razor

【解决方案1】：

变化：

$('.button-submit').bind('submit', function(e) {

收件人：

$('.button-submit').on('click', function(e) {

您的绑定不起作用的原因是您将 button 绑定到 submit 事件。如果你想使用 submit 事件，这需要绑定到 form 才能工作。

当用户尝试提交表单时，提交事件被发送到元素。它只能附加到<form>元素

$('form').on('submit', function(e) {

这也可以。但请注意，使用 on 而不是 bind 是自 jQuery 1.7 以来的最佳实践。

【讨论】：

额外说明，我不需要e.preventDefault();，所以我的代码现在读取$('.button-submit').on('click', function() {，没有e作为参数。
@christo8989 是的。你要么return false 要么e.preventDefault。他们做同样的事情:)