更改window.location而不触发刷新

Question

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

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

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

Answer 1

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

这将使用新的URL更新当前页面URL 而不刷新.

参数:

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

Answer 2

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

举个简单的例子,如果您的URL是http://server.com/page?id=4,当用户触发您发送AJAX请求的操作时http://server.com/page?id=4,并将页面URL设置为http://server.com/page#id=4.

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

我认为HTML5的历史记录功能可能会提供这一功能,但在它通常可用之前还需要很长时间.http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#history (2认同)

Answer 3

如果您想在当前浏览器中执行哪些操作,则无法在window.location.href不重新加载页面的情况下进行更改

你唯一的选择就是改变window.location.hash.

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

- 更新

它到处都不可用(http://caniuse.com/#feat=history),有一些polyfill,你现在可以使用这个API,如果它可用并使用url hash回退