防止表单提交后页面重新加载

Question

如何检测并停止网页重新加载？

我有一个页面，在成功提交其中的表单后会重新加载。我希望有一个事件监听器，能够检测页面是否正在重新加载，并阻止它重新加载。

在成功注册表单提交之后，我无法使用return false;。

- Green Wizard

---

你想要什么？你想让表单提交，但页面不改变/离开吗？ - epascarello

Answer 1

在您的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
}

- Andre

---

为了使其正常工作，您在调用函数时必须传递事件，例如：<form onsubmit="myFunction(event)">。 - Artur Noetzel

Answer 2

您需要使用 AJAX 提交表单，以避免刷新整个页面。

这可以通过常规 JavaScript 实现，但使用 jQuery 更容易。 http://api.jquery.com/jquery.ajax/

- user3923052

Answer 3

检测页面是否正在重新加载是一个非常糟糕的解决方案。

您需要防止默认操作。

<script>
$( "a" ).click(function( event ) {
  event.preventDefault();
});
</script>

http://api.jquery.com/event.preventdefault/

- Korbi

Answer 4

在这种情况下，您需要通过某种形式的AJAX调用来实现表单发送机制。

因为发送表单实际上是加载一个带有一些参数（即表单数据）的新页面。

- Evengard

Answer 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。

- plalx

Answer 6

提交后的默认操作是将数据发送到处理数据的页面。如果您想停止刷新，即您不提交表单。

1. 使用e.preventDefault()停止表单的默认提交。这将停止默认的提交行为，包括重新加载页面[但表单未被提交]
2. 您必须使用AJAX在后台提交表单[您的数据将在后台提交到所需的页面]

- Bhadra