更改window.location而不触发刷新

Question

我有一个提交GET请求的AJAX表单。因为这些都是GET请求，所以这些应该很容易被加入书签。我最好发出Ajax请求，更新屏幕，然后将window.location.href更新为新页面的URL。

不幸的是，这会重新加载页面。有什么方法可以解决这个问题吗？基本上我希望URL栏成为永久链接栏，但它需要能够更改以跟上页面的状态。

window.location.hash不好，因为它不会被发送到服务器。

Answer 1

window.history.replaceState( {} , title, new_URL );

这将使用新的更新当前页面网址，而无需刷新。

参数：

1. 数据对象（必须是可以序列化为文本的对象）
2. 更改后的窗口网址的新标题
3. 要更改为的网址（不刷新）

当用户在浏览器历史记录中前进或前进并根据您的意愿更改内容时，您可以使用window.onpopstate = function(event){...}收听事件。

Answer 2

哈希是要走的路。因为，正如您所指出的，对散列的更改不会发送到服务器，您必须向服务器发送异步请求以及更新散列。

举个简单示例，如果您的网址为http://server.com/page?id=4，则当用户触发操作时，您会发送http://server.com/page?id=4的AJAX请求，并将网页网址设置为http://server.com/page#id=4。

此外，如果用户重新加载，您必须有一些东西来恢复状态。这通常通过读取哈希值客户端并基于哈希值表示的状态向服务器发送异步请求来完成。

Answer 3

如果您想要在当前浏览器中运行，则无法在不重新加载页面的情况下更改window.location.href

您唯一的选择是更改window.location.hash。

每次进行ajax调用时都可以这样做。如果您正在使用jquery，则可以绑定一个函数，该函数在每次进行ajax调用时更新哈希。 如果你选择你必须在页面加载时寻找哈希（实际上不知道/认为你可以做那个服务器端）并进行调用以使你的页面处于对应于哈希的状态。

- 更新

现在有一个API为history.pushState，history.replaceState和window.onpopstate提供此功能：https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history#Adding_and_modifying_history_entries

它无法在任何地方使用（http://caniuse.com/#feat=history），有一些polyfill可以暂时使用这个API，如果它可用并使用url hash回退

Answer 4

考虑这个JavaScript库：https://github.com/browserstate/history.js

Answer 5

使用jquery。它可以执行ajax请求。您不能使用window.location，因为这是为了更改URL。