如何使用 jQuery 发布表单？答案

【问题标题】：How to post form using jQuery?如何使用 jQuery 发布表单？
【发布时间】：2010-09-09 22:09:44
【问题描述】：

我有一个带有提交按钮的表单，它工作正常，但我现在有一个用户请求，如果单击页面上的链接并且表单是“脏”的，则可以保存表单（发布以保存操作） .

我已经有了一个 isDirty JavaScript 变量的逻辑，现在我想在 JavaScript 函数变脏时发布表单。

我的表单声明如下：

    <form id="formSmart" action="<%= ResolveUrl("~/SmartForm/Proceed") %>"
          method="post" enctype="multipart/form-data">

我的 JavaScript 是：

function checkLink() {
  if (isDirty) {
    $("#formSmart").submit();
  }
}

没有调用继续操作，但是当我单击表单上的提交按钮时，它可以正常工作。我在 JavaScript 中做错了什么？

注意： 调用 checkLink() 工作正常，最终问题是 $("#formSmart").submit();未发布到继续操作。

【问题讨论】：

标签： javascript jquery asp.net-mvc

【解决方案1】：

根据您发布的内容和名称匹配，您可以正确提交表单。

您确定您正在调用checkLink 并且isDirty 等于true？

在提交之前将和alert('Test'); 放在if 范围内。

编辑：要连接您的活动，您需要执行以下操作：

$('#yourLinkID').click(checkLink(); return false;);

注意return false，这将导致您的链接不执行导航。如果您希望链接导航，您只需删除该部分即可。

【讨论】：

是的，我添加了一个 alert() 并且它正在触发，没有抛出错误，但是我在控制器操作中的断点没有被命中。当我点击提交时，断点被命中。
但我总是希望我的表单能够导航，只想执行提交（保存字段），但由于某种原因我的控制器帖子没有被调用。
@Mark Kadlec 你能确认$("#formSmart") 没有返回正确的表格吗？有些事情看起来很奇怪，因为一切看起来都应该正常工作......也许它是如此简单，我们都忽略了它......可能需要新鲜的眼睛:)
@Kelsey，感谢您的帮助，有没有办法检查 JQuery 是否至少找到表单并尝试提交？
@Mark Kadlec 只需添加以下警报：alert($('#formSmart));。它应该显示类似[object] 的内容。如果没有，那么它没有找到您的表格。还要检查是否有东西可以拦截提交服务器端（值得怀疑，但还要检查一件事）。

【解决方案2】：

听起来要求是“点击页面上的链接”。

也许将此事件附加到页面上的所有<a> 标记。

$(document).ready(function() {
    // all <a> tags get the checkLink attached to them
    $("a").click(checkLink());
});

【讨论】：

如果点击了超链接，我想调用该函数，所以我愿意以任何方式调用该函数（无论是在关闭事件上还是在 onclick 事件上）。
我基本上是在尝试消除表单中的数据丢失并在表单脏时强制提交

【解决方案3】：

您的问题是浏览器在页面执行您的提交之前导航。
解决方案是暂停导航，直到您保存表单。

丑陋的解决方案：
您可以购买将点击的网址保存在隐藏字段中，
返回 false 停止导航，
并在提交后检查那里的值，如果存在，请导航

更好的解决方案：
通过 ajax 发布表单并在 ajax 调用完成后（无需检查成功或错误）执行导航（使其变得非常简单，只需使用 ajaxForm ajaxForm plugin）
此解决方案的唯一问题是链接是否有 target="_blank" 因为您必须使用 window.open 可能会被弹出窗口阻止程序阻止
you can play with a simple jsbin sample i prepared showing this

此示例将一些值发布到此页面的旧版本 + 导航到 google，打开 fiddler 并查看它首先发布然后导航。

如果您进入 jsbin 页面，请停止阅读
这是HTML：

<form id="formSmart" action="http://jsbin.com/oletu4/edit" method="post">
<input type="text" name="someLie" />
<input type="text" name="someLie2" />
<input type="submit" value="submit" />
<a id="lnkNavOut" href="http://www.google.com">www.google.com</a>

这里是 JS：

$(document).ready(function(){
  $("#lnkNavOut").click(function(){
  var jqFormSmart = $("#formSmart");
  //check here if the form is dirty and needs to be saved
  var jqClickedLink = $(this);
  $.ajax({
          url: jqFormSmart.attr("action"),
          type: "POST",
          data:jqFormSmart.serialize(), 
          complete:function(){
          location = jqClickedLink.attr("href");
          }
       }); 
   return false;//stop navigation
  });
});

【讨论】：

感谢 Avi，我非常感谢 Ajax 解决方案，看起来不错。