Javascript 提交表格并保持在同一页上？

我有一张像这样的表格

<form action="receiver.pl" method="post">
  <input name="signed" type="checkbox">
  <input value="Save" type="submit">
</form>

我希望在单击Submit时仍停留在同一页面上，但仍然执行

receiver.pl

---

应该如何做？

当您点击提交按钮时，页面将被发送到服务器。

---

如果您想异步发送，可以使用ajax。

99%的时间我都会使用或用于类似的用途。然而，有一种替代解决方案不需要javascript

您可以在页面上包含一个隐藏的iframe，并将表单的target属性设置为指向该iframe

<style>
  .hide { position:absolute; top:-1px; left:-1px; width:1px; height:1px; }
</style>

<iframe name="hiddenFrame" class="hide"></iframe>

<form action="receiver.pl" method="post" target="hiddenFrame">
  <input name="signed" type="checkbox">
  <input value="Save" type="submit">
</form>

.hide{位置：绝对；顶部：-1px；左侧：-1px；宽度：1px；高度：1px；}

我很少会选择这条路线。一般来说，使用javascript处理它会更好，因为使用javascript您可以

• 优雅地处理错误（例如重试）
• 提供UI指标（例如加载、处理、成功、失败）
• 在发送请求之前运行逻辑，或者在收到响应之后运行逻辑

---

最简单的答案是：jQuery。这样做：

$(document).ready(function(){
   var $form = $('form');
   $form.submit(function(){
      $.post($(this).attr('action'), $(this).serialize(), function(response){
            // do something here on success
      },'json');
      return false;
   });
});

如果您希望动态添加内容，但仍然需要它工作，并且需要使用多个表单，则可以执行以下操作：

   $('form').live('submit', function(){
      $.post($(this).attr('action'), $(this).serialize(), function(response){
            // do something here on success
      },'json');
      return false;
   });

---

HTTP/CGI方法是让您的程序返回HTTP状态码204（无内容）。
使用

---

最简单：添加target=“_blank”-不那么简单：ajaxSo

receiver.pl

在新窗口/选项卡中打开？这看起来非常有趣！我如何告诉它执行

receiver.pl

脚本？它说“$form.attr（'action'）”的部分就是这样做的-它告诉jQuery的提交函数调用表单（'receiver.pl'）指定的操作，而不离开页面，即使用AJAX。那么，我一定是做错了什么，因为它仍然将页面更改为

receiver.pl

，所以我已将您的代码添加到标题部分，并包括
。我需要做其他更改吗？顺便说一句。我找到了这个页面，但我不能完全理解它。@kvaradha不，要处理文件上载，您需要使用jquery的

数据
参数显式地将其发送到
$.ajax
函数，
新表单数据（$（this）[0]）
并将
enctype=“multipart/form data”
添加到表单中。看看这个答案：我没说这是最好的答案。只是另一种选择这实际上可能是最好的答案。。。您不必使用Jquery，Ajax etcI am也遇到了类似的情况，并尝试了@jessegavin的建议。但是在提交时，perl cgi不会获取表单元素。有什么建议吗？Btwn-字段/表单元素由jQuery datepickerI填充，就像这样，因为它是最简单的，不需要额外的库，只使用html。我正是我要找的。超级酷！今天学到了一些新东西。然而，实际上，您确实希望向用户提供某种视觉反馈，说明表单提交是由服务器处理的。浏览器似乎并没有提供现成的功能，所以使用AJAX解释HTTP 204可能是最好的选择。哇。。。谢谢这真是一个惊人的提示，它并不能完全解决我的问题，但它绝对是一个临时解决方案。非常感谢！这太棒了。谢谢这是一种用简单html实现的简单而伟大的方法。伟大的这是一个很好的方法。比其他方法简单得多。
var xhr = new XMLHttpRequest();
xhr.open("POST", '/server', true);

//Send the proper header information along with the request
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xhr.onreadystatechange = function() { // Call a function when the state changes.
    if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
        // Request finished. Do processing here.
    }
}
xhr.send("foo=bar&lorem=ipsum");
// xhr.send(new Int8Array()); 
// xhr.send(document);