如何使用jQuery阻止表单提交？

Question

我有这个表格：

<form action='/Admin/Update' method='post'>
    <input type='text' name='dataUpdate' value=" + $temp + " />
    <input type='submit' value='Update'/>
</form>

这个jQuery：

$("form[action$='Update']").submit(function () {
    $.post( $(this).attr("action") , $(this).serialize() );
    return false;
});

表单提交自己......而我希望它是一个ajax调用。

我究竟做错了什么...

如果你们中的一些人知道mvc3你能否告诉我这是否会激活我的行动？

[HttpPost]
public ActionResult Update(string data)
{
    string data2 = data;   
    return View(_gMenus.GetMyMenus());
}

或者它不是用jQuery向这个方法发送变量的方法

更新：

即使我这样做..仍然有回发：

    $("#submit_btn").click(function () {

    return false;
});

也许我应该使用live()方法？

Answer 1

尝试使用event.preventDefault()来停止所有浏览器操作。

$("form[action$='Update']").submit(function (event) {
    event.preventDefault();
    $.post( $(this).attr("action") , $(this).serialize() );
    return false;
});

或者，您可以将提交按钮更改为如下所示的简单按钮，

<input type='button' id="submit_btn" value='Update'/>

并更改提交处理程序以单击下面的处理程序，

$(document).ready (function () {
  $("#submit_btn").on ('click', function () {    
    $.post( $(this).attr("action") , $(this).serialize() );
    return false;
  });
});

编辑：您应该在动态元素的下面语法中使用.on （对于jQuery v1.7）

$(document).ready (function () {
   $(document).on ("click", "#submit_btn", function () {    
     $.post( $(this).attr("action") , $(this).serialize() );
     return false;
   });
});

对旧版本使用.live ，

$(document).ready (function () {
   $("submit_btn").live ("click", function () {    
     $.post( $(this).attr("action") , $(this).serialize() );
     return false;
   });
});

Answer 2

如果你正在使用MVC 3，那么这种东西已经内置了。

你的表格是

@using(Ajax.BeginForm()){
    // fields/inputs/submit button
}

然后包含相关的Javascript文件。

<script src="/js/libs/jquery.validate.min.js"></script>
<script src="/js/libs/jquery.unobtrusive-ajax.min.js"></script>
<script src="/js/libs/jquery.validate.unobtrusive.min.js"></script>

这将满足您的需求。 查看Ajax.BeginForm，了解您可以使用的各种AjaxOptions。

还看看; MVC 3 - Ajax.BeginForm完整回发

Answer 3

（代表OP发布） 。

我明白了，它现在有效：

    $("#submit_btn").live('click', function () {
    alert("succeeded");
    $.post($(this).attr("action"), { data: $('dataUpdate').val() });
    return false;
});