提交表格并停留在同一页面上？答案

【问题标题】：Submit form and stay on same page?提交表格并停留在同一页面上？
【发布时间】：2011-08-09 16:20:29
【问题描述】：

我有一个看起来像这样的表单

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

当单击提交时，我想留在同一页面上，但仍然执行 receiver.pl。

应该怎么做？

【问题讨论】：

最简单：添加 target="_blank" - 不太简单：ajax
所以receiver.pl 在新窗口/标签页中打开？

标签： javascript html perl

【解决方案1】：

99% 的时间我会使用 XMLHttpRequest 或 fetch 来处理类似的事情。但是，有一个不需要 javascript 的替代解决方案...

您可以在页面上包含一个隐藏的 iframe，并将表单的目标属性设置为指向该 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>

我会选择这条路线的情况很少。通常使用 javascript 处理它会更好，因为使用 javascript 您可以...

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

【讨论】：

没有说这是最好的答案。只是另一种选择。 ;)
这实际上可能是最好的答案...你不必使用 Jquery、Ajax 等
我也遇到了类似的情况，并尝试了@jessegavin 的建议。但是在提交时，perl cgi 不会获取表单元素。有什么建议吗？
Btwn - 字段/表单元素由 jQuery datepicker 填充
我喜欢这个，因为它最简单，不需要额外的库，只使用 html。我正是我想要的。

【解决方案2】：

最简单的答案：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;
   });

【讨论】：

这看起来很有趣！如何告诉它执行receiver.pl 脚本？
它说'$form.attr('action')'的部分就是这样做的——它告诉jQuery的提交函数调用表单（'receiver.pl'）指定的动作，而不离开页面，即使用 AJAX。
那我一定是做错了什么，因为它仍然将页面更改为receiver.pl 我已将您的代码添加到标题部分，并包含<script src="http://code.jquery.com/jquery-1.5.js"></script>。我需要进行其他更改吗？
顺便说一句。我找到了这个页面，askaboutphp.com/213/…，但我不太明白。
@Kvvaradha 不，要处理文件上传，您需要使用 jquery 的 data 参数将其显式发送到 $.ajax 函数 new FormData($(this)[0]); 并将 enctype="multipart/form-data" 添加到表单中。看到这个答案：stackoverflow.com/a/10899796/445210

【解决方案3】：

执行此操作的 HTTP/CGI 方法是让您的程序返回 HTTP 状态代码 204（无内容）。

【讨论】：

超酷！今天学到了新东西。但是，实际上，您确实希望向用户提供某种视觉反馈，表明表单提交已由服务器处理。浏览器似乎没有提供开箱即用的功能，因此使用 AJAX 来解释 HTTP 204 可能是最好的选择。
哇...谢谢！...这真是一个了不起的提示，它并不能完全 100% 解决我遇到的问题，但它绝对是一个临时解决方案。非常感谢！
这很棒。谢谢！
在简单的 html 中实现它的简单而好方法。太好了！
这是一个很好的方法。比其他方法简单得多。

【解决方案4】：

当您点击提交按钮时，页面被发送到服务器。如果要异步发送，可以使用 ajax。

【讨论】：

【解决方案5】：

使用XMLHttpRequest

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);

【讨论】：