使用AJAX发布Asp.net表单

我对JQuery有点陌生。假设我们有这个jquery函数：

var f = $("#myForm");
var url = f.attr("action");
var formData = f.serialize();
$.post(url, formData, function(data) {
    $("#postResult").html(data);
});

此表格：

<form id="myForm" action="/Monitor/Test/FormPost" method="post">
    <div>First Name: <input name="FirstName" type="text" value="Bob" /></div>
    <div>Last Name: <input name="LastName" type="text" value="Cravens" /></div>
    <div>Age: <input name="Age" type="text" value="43" /></div>
    <input type="submit" value="Save Contact" />
    <div id="postResult">?</div>
</form>

名字：
姓氏：
年龄：
?

如何将save按钮与jquery函数绑定？多谢各位

//this handler can work on any form that need to post all values
$("form input[type='submit']", f).click(function(e){
   e.preventDefault();
   var $this = $(this);
   var f = $this.parents('form');
   var url = f.attr("action");
   var formData = f.serialize();
   $.post(url, formData, function(data) {
       $("#postResult").html(data);
   });

   return false;
})

在此代码中，您订阅的是单击事件。

[e.preventDefault（）；][1]

将阻止表单过早提交，您可以完成所需的工作

在此代码中，您订阅的是单击事件。

---

[e.preventDefault（）；][1]

将阻止表单过早提交，您可以完成所需的工作。

一种简单的方法是绑定到按钮的单击事件。大概是这样的：

$('#myForm input[type="submit"]').click(function () {
    var f = $("#myForm");
    var url = f.attr("action");
    var formData = f.serialize();
    $.post(url, formData, function(data) {
        $("#postResult").html(data);
    });
});

这将专门查找id为“myForm”的表单的子级提交输入（如果有其他按钮等），并使用相关函数响应其单击事件

为了安全起见，由于您实际上是在短接表单并通过AJAX发布，您可能还应该将

submit

更改为正常的

按钮

：

<input type="button" value="Save Contact" />

或：

---

一种简单的方法是绑定到按钮的click事件。大概是这样的：

$('#myForm input[type="submit"]').click(function () {
    var f = $("#myForm");
    var url = f.attr("action");
    var formData = f.serialize();
    $.post(url, formData, function(data) {
        $("#postResult").html(data);
    });
});

这将专门查找id为“myForm”的表单的子级提交输入（如果有其他按钮等），并使用相关函数响应其单击事件

为了安全起见，由于您实际上是在短接表单并通过AJAX发布，您可能还应该将

submit

更改为正常的

按钮

：

<input type="button" value="Save Contact" />

或：

更一般的方法

---

更一般的方法。

还有一个问题，如果我有许多表单，我如何指定我将使用哪一个表单，是否有其他版本可以根据表单的Id显式选择表单？可以有很多方法，但可以很容易地与dom操作分离，例如；在jquery if（form.data（“send”）！=undefined）{do with ajax}else{form.submit（）；}@HamdiBaligh:在这个示例中（使用事件委托，这很可怕），第二个参数是按钮的选择器。如果您的表单有一个ID，您可以使用我的答案中的选择器作为调用

.on（）

的第二个参数。您也可以在按钮上添加一个id，在这种情况下，

.on（）

（或我的答案中的主选择器）的第二个参数将是

#theidof thebutton

@David我尝试了您的解决方案，但当我单击按钮时，它会将我重定向到另一个html页面，其中有我返回的字符串，我希望是这样assynchronous@HamdiBaligh：听起来表单仍在正常发布（这并不意味着AJAX不工作，只是它被主表单发布忽略了）

e.preventDefault（）

应该可以防止这种情况。添加

返回false也应该有帮助。我通常只建议将按钮从
submit
更改为常规按钮，因此其默认操作不是提交表单。还有一个问题，如果我有多个表单，如何指定要使用的表单，有没有其他版本，我可以通过它的Id显式地选择一个表单？有很多种方法，但是你可以很容易地用dom操作来分离；在jquery if（form.data（“send”）！=undefined）{do with ajax}else{form.submit（）；}@HamdiBaligh:在这个示例中（使用事件委托，这很可怕），第二个参数是按钮的选择器。如果您的表单有一个ID，您可以使用我的答案中的选择器作为调用
.on（）
的第二个参数。您也可以在按钮上添加一个id，在这种情况下，
.on（）
（或我的答案中的主选择器）的第二个参数将是
#theidof thebutton
@David我尝试了您的解决方案，但当我单击按钮时，它会将我重定向到另一个html页面，其中有我返回的字符串，我希望是这样assynchronous@HamdiBaligh：听起来表单仍在正常发布（这并不意味着AJAX不工作，只是它被主表单发布忽略了）
e.preventDefault（）
应该可以防止这种情况。添加
返回false也应该有帮助。我通常只建议将按钮从
submit
更改为常规按钮，因此其默认操作不是提交表单。
$('#myForm button')

$(document).on("click","input[type=submit]",function(e)
        {
          e.preventDefault();
          var form = $(this).closest("form");
          $.post(form.attr("action",form.serialize(),function(d){
            //result
          });
        });