表单提交后防止页面重新加载
Posted
技术标签:
【中文标题】表单提交后防止页面重新加载【英文标题】：prevent page from reloading after form submit 【发布时间】：2015-01-17 01:32:40 【问题描述】：如果页面正在重新加载，有没有办法检测并停止。
我有一个页面在成功提交表单后重新加载。我想要一个事件侦听器来查看页面是否正在重新加载并应该阻止它重新加载。
我不能return false;成功提交注册表
【问题讨论】：
你想要什么？您是否希望表单提交，但页面不更改/离开？ 【参考方案1】：检测页面是否正在重新加载是一个非常肮脏的解决方案。
你必须阻止默认操作
<script>
$( "a" ).click(function( event )
event.preventDefault();
);
</script>
http://api.jquery.com/event.preventdefault/
【讨论】：
【参考方案2】：您必须使用 AJAX 提交表单以避免刷新整个页面。
这可以使用常规的 javascript 来完成，但使用 jQuery 更容易 http://api.jquery.com/jquery.ajax/
【讨论】：
【参考方案3】：在这种情况下，您需要通过某种 AJAX 调用来实现表单发送机制。
因为发送表单实际上是在加载一个带有一些参数（即表单数据）的新页面。
【讨论】：
【参考方案4】：在您的 html 中：
<form onsubmit="myFunction()">
Enter name: <input type="text">
<input type="submit">
</form>
在你的 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
【讨论】：
【参考方案5】：标准表单提交的工作原理如下：
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.
因此，标准表单提交总是会导致页面重新加载。
但是，您可以使用 AJAX 发出 HTTP 请求，这样可以避免页面重新加载。
看看$.ajax
【讨论】：
【参考方案6】：提交后的默认操作是发送到它处理数据的页面。如果您试图停止刷新，即您没有提交表单。
-
使用
e.preventDefault() 阻止表单默认提交。这将停止默认提交行为，包括重新加载页面[但未提交表单]
您必须在后台使用 AJAX 提交表单[您的数据在后台提交到所需页面]
【讨论】：
以上是关于表单提交后防止页面重新加载的主要内容，如果未能解决你的问题，请参考以下文章