提交表单并停留在同一页？

Question

我有一个类似于这样的表单

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

当单击“提交”时，我希望留在同一页，但仍然执行receiver.pl，应该如何完成？

- Sandra Schlichting

---

好的，我会尽力进行翻译。简单的翻译是：添加target="_blank"； 稍微复杂一些的翻译是：使用ajax。 - mplungjan

那么 receiver.pl 是在新窗口/选项卡中打开的吗？ - Sandra Schlichting

Answer 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指示器（例如加载、处理、成功、失败）
• 在请求发送之前运行逻辑，或在接收响应后运行逻辑。

- jessegavin

---

并没有说这是最好的答案。只是另一个选择。 ;) - jessegavin

这实际上可能是这里最好的答案... 您不必使用Jquery，Ajax等。 - spauny

Btwn - 表单元素正在通过jQuery日期选择器进行填充。 - Govind Kailas

@GovindKailas 也许你应该发布自己的StackOverflow问题，因为它可能与这个问题没有直接关系。但是，请仔细检查所有字段是否具有“name”属性。 - jessegavin

我喜欢这个，因为它是最简单的，不需要额外的库，只使用了html。这正是我所寻找的。 - contractorwolf

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

- Herman Schaaf

---

非常好。不幸的是，如果您在表单内使用按钮，则其值将不会被发送..:( - Vincent Ketelaars

你知道这个能否正确地提交多部分表单吗？我有一种感觉它不会，但是有人可以确认一下吗？ - Josh

@Josh 不可以，但你可以在这个问题和这里看到如何实现。 - Herman Schaaf

它能处理多种类型的表单数据吗？我的意思是，它能在输入类型为文件提交时工作吗？ - Kvvaradha

@Kvvaradha 不，要处理文件上传，您需要使用jquery的data参数将其显式发送到$.ajax函数中，new FormData($(this)[0]);并将enctype="multipart/form-data"添加到表单中。请参见此答案：https://dev59.com/O2gv5IYBdhLWcg3wCcWZ#10899796 - Herman Schaaf

Answer 3

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

- Dave Cross

---

太酷了！今天学到了新东西。但是在实际情况下，你真的希望为用户提供某种视觉反馈，以表明表单提交已由服务器处理。浏览器似乎没有默认提供这个功能，因此使用 AJAX 解释 HTTP 204 可能是最好的选择。 - jessegavin

哇...谢谢！...这真是一个惊人的技巧，虽然它并不能完全解决我遇到的问题，但它绝对是一个临时的解决方案。非常感谢！ - Ilan Kleiman

太棒了。谢谢！ - Sean Anderson

一个简单而伟大的方法是使用简单的HTML。太好了！ - Kiran

这是一种非常好的方法。比其他方法简单得多。 - Andrew

Answer 4

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

- Eric Frick

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

- Hasan A Yousef