我有一个看起来像这样的表格
<form action="receiver.pl" method="post">
<input name="signed" type="checkbox">
<input value="Save" type="submit">
</form>
我想留在同一页面上，当点击提交时，但仍然receiver.pl执行。
那应该怎么做？
提交表单并停留在同一页面上？
IT技术
javascript
html
perl
2021-01-13 13:45:15
5个回答
99% 的时间我会使用XMLHttpRequest或fetch 来做这样的事情。但是，有一个不需要 javascript 的替代解决方案......
您可以在页面上包含一个隐藏的 iframe，并将表单的 target 属性设置为指向该 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 方法是让您的程序返回 HTTP 状态代码 204（无内容）。
当您点击提交按钮时，页面被发送到服务器。如果你想异步发送它，你可以用ajax来做。
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);