jQuery 在 AJAX 调用上更新 URL？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1134280/
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
Update URL on AJAX call?
提问by
Right now the biggest issue I'm having with using AJAX is the fact that if I use AJAX on a page, go to another page, then use the browser's back button to go back anything that was changed with AJAX is gone.
现在我在使用 AJAX 时遇到的最大问题是，如果我在一个页面上使用 AJAX，转到另一个页面，然后使用浏览器的后退按钮返回使用 AJAX 更改的任何内容都消失了。
I've thought about using the jQuery Addresssplugin to solve that problem but I don't like how it only amends the URL with "#whatever.html" instead of changing it completely.
我曾考虑使用jQuery Addresss插件来解决这个问题，但我不喜欢它如何只用“#whatever.html”修改 URL 而不是完全改变它。
Ideally, what I would like is to have the URL go from: "www.example.com/p:2/" to "www.example.com/p:3/" when I make the relevant AJAX call.
理想情况下，当我进行相关的 AJAX 调用时，我希望 URL 从“www.example.com/p:2/”变为“www.example.com/p:3/”。
Is this at all possible?
这是可能吗？
采纳答案by SolutionYogi
Nope, this is not possible. Update: It is now possible via the HTML5 History API - see razbakov's answer.
不，这是不可能的。更新：现在可以通过 HTML5 History API 实现 - 请参阅razbakov 的回答。
I hope you realize that you are trying to address an extremely difficult problem.
我希望你意识到你正在努力解决一个极其困难的问题。
Let's say your url looks like
假设您的网址看起来像
http://example.com/mypage/
If you change the window location programmatically to
如果您以编程方式将窗口位置更改为
http://example/mypage/1/
Browser will take over and try to navigate to that page, there goes your fancy ajax code!
浏览器将接管并尝试导航到该页面，这是您喜欢的 ajax 代码！
So what's the alternative? You use URL fragment.
那么有什么替代方案呢？您使用 URL 片段。
Let's say you have a URL like this,
假设你有一个这样的 URL，
http://example.com/anotherpage/#section
Browser will first load http://example.com/anotherpage/and try to find an anchor named 'section' and scroll to that location. This behavior is exploited by the 'Addresses' plugin. This is similar to how those 'Scroll To Top' links work.
浏览器将首先加载http://example.com/anotherpage/并尝试找到一个名为“section”的锚点并滚动到该位置。“地址”插件利用了这种行为。这类似于那些“滚动到顶部”链接的工作方式。
So if you are on the page
所以如果你在页面上
http://example.com/mypage/
and change the URL to
并将 URL 更改为
http://example.com/mypage/#1
Browser will not load new page but rather try to find anchor named '1' and scroll to that anchor.
浏览器不会加载新页面，而是尝试找到名为“1”的锚点并滚动到该锚点。
Even if you have managed to add fragments to the URL, it doesn't mean the work is done. If the user presses the back button, DOM will be reset and you will have to parse those fragments and recreate the DOM. It's definitely non-trivial.
即使您已设法向 URL 添加片段，也不意味着工作已完成。如果用户按下后退按钮，DOM 将被重置，您将不得不解析这些片段并重新创建 DOM。这绝对是不平凡的。
回答by Aleksey Razbakov
It's possible with HTML5. You can test as example GitHub or Vkontakte site.
HTML5 是可能的。您可以作为示例 GitHub 或 Vkontakte 站点进行测试。
The best answer is here: Change the URL in the browser without loading the new page using JavaScript
最佳答案在这里：使用 JavaScript 更改浏览器中的 URL，而无需加载新页面
It says that you can use history.pushState function for those purposes. But this solution will only work in HTML5 compatitable browsers. Otherwise you need to use hash-method.
它说您可以将 history.pushState 函数用于这些目的。但是这个解决方案只适用于 HTML5 兼容的浏览器。否则你需要使用哈希方法。
回答by v4r
This problem can be solved using history.js. https://github.com/browserstate/history.js
这个问题可以使用 history.js 解决。https://github.com/browserstate/history.js
回答by Syed Shahjahan
After making AJAX call, we can update the Client URL using history.pushState. Please find the below syntax and example
进行 AJAX 调用后，我们可以使用 history.pushState 更新客户端 URL。请找到以下语法和示例
Syntax: history.pushState(obj, obj.Title, obj.Url);
语法：history.pushState(obj, obj.Title, obj.Url);
Example:
例子：
var url = "http://example.com/mypage/" + "newParameter=newValue"
history.pushState(undefined, '', url);
