Javascript 提交表单并停留在同一页面上？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5733808/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Submit form and stay on same page?
提问by Sandra Schlichting
I have a form that looks like this
我有一个看起来像这样的表格
<form action="receiver.pl" method="post">
<input name="signed" type="checkbox">
<input value="Save" type="submit">
</form>
and I would like to stay on the same page, when Submit is clicked, but still have receiver.plexecuted.
我想留在同一页面上，当点击提交时，但仍然receiver.pl执行。
How should that be done?
那应该怎么做？
回答by jessegavin
99% of the time I would use XMLHttpRequestor fetchfor something like this. However, there's an alternative solution which doesn't require javascript...
99% 的时间我会使用XMLHttpRequest或fetch 来做这样的事情。但是，有一个不需要 javascript 的替代解决方案......
You could include a hidden iframe on your page and set the target attribute of your form to point to that iframe.
您可以在页面上包含一个隐藏的 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>
There are very few scenarios where I would choose this route. Generally handling it with javascript is better because, with javascript you can...
我会选择这条路线的场景很少。通常使用 javascript 处理它会更好，因为使用 javascript 你可以......
- gracefully handle errors (e.g. retry)
- provide UI indicators (e.g. loading, processing, success, failure)
- run logic before the request is sent, or run logic after the response is received.
- 优雅地处理错误（例如重试）
- 提供 UI 指标（例如加载、处理、成功、失败）
- 在发送请求之前运行逻辑，或者在收到响应之后运行逻辑。
回答by Herman Schaaf
The easiest answer: jQuery. Do something like this:
最简单的答案：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;
});
});
If you want to add content dynamically and still need it to work, and also with more than one form, you can do this:
如果你想动态添加内容并且仍然需要它工作，并且有多个表单，你可以这样做：
$('form').live('submit', function(){
$.post($(this).attr('action'), $(this).serialize(), function(response){
// do something here on success
},'json');
return false;
});
回答by Dave Cross
The HTTP/CGI way to do this would be for your program to return an HTTP status code of 204 (No Content).
执行此操作的 HTTP/CGI 方法是让您的程序返回 HTTP 状态代码 204（无内容）。
回答by Eric Frick
When you hit on the submit button, the page is sent to the server. If you want to send it async, you can do it with ajax.
当您点击提交按钮时，页面被发送到服务器。如果你想异步发送它，你可以用ajax来做。
回答by Hasan A Yousef
Use 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);
回答by user2251255
Just use: action="". There's no need for anything like javascript.
只需使用：action=""。不需要像 javascript 这样的东西。
