javascript 表单提交后防止页面重新加载
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/27018422/
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
prevent page from reloading after form submit
提问by Green Wizard
Is there a way to detect and stop if page is reloading.
有没有办法检测和停止页面是否正在重新加载。
I have a page which is getting reloaded after successful submission of a form present in it. I want to have an event listener which sees if page is reloading and should stop it from being reloaded.
我有一个页面,在成功提交其中的表单后正在重新加载。我想要一个事件侦听器,它可以查看页面是否正在重新加载并且应该阻止它重新加载。
I cannot return false;
for sucessful submit of registration form
我不能return false;
成功提交注册表
回答by Andre
In your html:
在你的 html 中:
<form onsubmit="myFunction()">
Enter name: <input type="text">
<input type="submit">
</form>
<form onsubmit="myFunction()">
Enter name: <input type="text">
<input type="submit">
</form>
In your javascript:
在你的 javascript 中:
myFunction = function(e) {
// prevents default action to happen
e.preventDefault();
// do what ever you want to do here
// i.e. perform a AJAX call
}
myFunction = function(e) {
// prevents default action to happen
e.preventDefault();
// do what ever you want to do here
// i.e. perform a AJAX call
}
回答by Andre
You would have to submit the form using AJAX to avoid refreshing the entire page.
您必须使用 AJAX 提交表单以避免刷新整个页面。
This can be accomplished with regular Javascript but is made easier with jQuery http://api.jquery.com/jquery.ajax/
这可以使用常规 Javascript 完成,但使用 jQuery http://api.jquery.com/jquery.ajax/更容易
回答by Korbi
Detecting if the page is reloading is a very dirty solution.
检测页面是否正在重新加载是一个非常脏的解决方案。
You have to prevent the default action
您必须阻止默认操作
<script>
$( "a" ).click(function( event ) {
event.preventDefault();
});
</script>
回答by Evengard
In that case you'll need to implement the form sending mechanics via some kind of AJAX call.
在这种情况下,您需要通过某种 AJAX 调用来实现表单发送机制。
Because sending a form is actually loading a new page with some parameters (which are the form data).
因为发送表单实际上是加载带有一些参数(即表单数据)的新页面。
回答by plalx
Here's how a standard form submission works:
以下是标准表单提交的工作原理:
Browser -> issues GET or POST HTTP request -> Server
Browser <- returns the result of the request <- Server
Browser re-renders the current page based on the server's response.
Therefore, a standard form submit will always incur a page reload.
因此,标准表单提交总是会导致页面重新加载。
However, you can use AJAX to make your HTTP request, which allows you to avoid a page reload.
但是,您可以使用 AJAX 发出 HTTP 请求,从而避免页面重新加载。
Have a look at $.ajax
看看$.ajax
回答by Bhadra
The default action after submit is to send to the page where it manipulates the data. if you are trying to stop the refresh, i.e you are not submitting the form.
提交后的默认操作是发送到它处理数据的页面。如果您试图停止刷新,即您没有提交表单。
- stop the form from default submitting using
e.preventDefault()
. this will stop the default submit behavior, which includes reload of page[ but form is not submitted] - you have to submit the form using AJAXin background [your data is submitted in the background to the required page]
- 使用
e.preventDefault()
. 这将停止默认提交行为,包括重新加载页面[但未提交表单] - 您必须在后台使用AJAX提交表单[您的数据在后台提交到所需页面]