javascript - 提交表格并停留在同一页面上？

Question

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

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

我希望在单击“提交”时停留在同一页面上，但仍执行 receiver.pl。

应该怎么做？

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