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 does a full post back

Answer 3

（代表OP发布）。

我明白了，它现在有效：

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

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

3 个答案: