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

我有一张这样的表格

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

我想留在同一个页面，当提交被点击，但仍然有 receiver.pl执行。

这该怎么做呢？

190564 次浏览
小开

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

小开

99% 的情况下我会使用 XMLHttpRequest或者 捡回来来做类似的事情。然而，有一个替代的解决方案不需要 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:

$(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 方法可以让你的程序返回一个204的 HTTP状态码(无内容)。

小开

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

提交答案