Javascript 如何在表单提交时停止页面刷新
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11993644/
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
How to stop page refresh on form submit
提问by Keith
I have a form which automatically refreshes the page on submit, I have tried adding:
我有一个在提交时自动刷新页面的表单，我尝试添加：
onSubmit="return false;"to the form element, but then the form just stops and nothing happens when you click submit.
onSubmit="return false;"到表单元素，但是当您单击提交时，表单会停止并且没有任何反应。
I wouldnt mind the page refresh so much but the form is at the bottom of the page and the refresh kicks you back to the top. So I tried this approach:
我不太介意页面刷新，但表单位于页面底部，刷新会将您踢回顶部。所以我尝试了这种方法：
<form name='test' method='POST' action="index.php" onSubmit="window.scrollTo(5000,500);">
<form name='test' method='POST' action="index.php" onSubmit="window.scrollTo(5000,500);">
This works for a split second but then something else overrides it (not sure what)
这会在一瞬间起作用，但是其他东西会覆盖它（不确定是什么）
I have also tried using php: header.locationjust to get a "headers have already been sent" error.
我也尝试过使用 php:header.location只是为了得到一个“标题已经发送”的错误。
The site in question can be seen here, and the form is at the very bottom.
有问题的网站可以在这里看到，表格在最底部。
The only two jquery libraries I am using that I could foresee any conflicts with are nicescroll and (more likely) waypoints, but i dug through them both and couldn't find any conflicting issues.
我正在使用的唯一两个 jquery 库我可以预见到任何冲突是 nicescroll 和（更有可能的）航点，但我对它们都进行了挖掘，找不到任何冲突的问题。
If anyone knows of a way to keep the functionality of the form but stop the refresh of the page, that would be wonderful Thanks
如果有人知道保持表单功能但停止刷新页面的方法，那就太好了，谢谢
EDIT: After reading the answers below, it looks like I will have to use ajax to acomplish this, I have absolutely no experience with ajax, so I will see how that goes.
编辑：阅读下面的答案后，看起来我将不得不使用 ajax 来完成这个，我完全没有使用 ajax 的经验，所以我会看看情况如何。
回答by thecodeparadox
It seems you need to go through of way of AJAXsubmission in that case. In that case, you can use jQuery $.ajax()method to do that. A sample below:
在这种情况下，您似乎需要通过AJAX提交方式。在这种情况下，您可以使用 jQuery$.ajax()方法来做到这一点。下面是一个示例：
HTML
HTML
<form name='test' method='POST' action="index.php">
jQuery
jQuery
$('form[name=test]').submit(function(e) {
e.preventDefault();
window.scrollTo(5000,500);
// a sample AJAX request
$.ajax({
url : this.action,
type : this.method,
data : $(this).serialize(),
success : function(response) {
}
});
});
Here, .preventDefault()is for stop page refresh on form submit.
在这里，.preventDefault()用于在表单提交时停止页面刷新。
回答by Mike Christensen
Why not submit the form to a hidden IFRAME?
为什么不将表单提交到隐藏的 IFRAME？
<iframe name="myiframe" style="display: none;"></iframe>
<form name='test' method='POST' action="index.php" target="myiframe">
...
</form>
回答by Andres Pera Salmon
What about using AJAX instead of a normal form submit?
使用 AJAX 代替普通表单提交怎么样？
