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

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

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

Answer 3

HTTP/CGI方法是让程序返回HTTP状态代码204(无内容).