更改页面网址而不刷新页面答案

【问题标题】：changing page url without refreshing page更改页面网址而不刷新页面
【发布时间】：2010-12-26 06:44:56
【问题描述】：

这可能吗？

问题来了：

我用这个网址进行了关键字搜索（搜索后）：http://localhost/thi/search?keyword=key

然后我有一个使用 AjaxForm 插件 (jquery) 的滑块搜索...

当我执行滑块搜索时，显然我仍然会在关键字搜索 URL 中（因为请求是通过 ajax 发送的）

有没有办法将当前 url 更改为 http://localhost/thi/search?price=100 之类的东西（滑块通过 GET 提交，价格作为 GET 变量）

我希望这样做是因为我希望将滑块的搜索结果添加为书签...或者有其他方法吗？

【问题讨论】：

【解决方案1】：

我可以建议的最好的事情是在 url 中使用哈希。这将允许用户为网址添加书签，并在他们回来时仍然保持状态。另一个好处是您可以在不刷新页面的情况下更改哈希。

JQuery 地址插件可以很好地解决这个问题。

【讨论】：

【解决方案2】：

您可以将哈希网址 (search#price=100) 与 window.location.hash 方法一起使用。这些将被添加到书签中，用户可以使用后退和前进按钮浏览这些。

使用示例：

<a href="#">100</a>

$('a').click(function() {
    window.location.hash = 'price='+$(this).html();
    return false;
});

将网址设置为search#price=100而不刷新。

【讨论】：

它也会在 URL 上触发 get 吗？
不，它不会，因为哈希值在当前页面上。如果散列存在，它会跳转到它。
这将使页面成为“书签”，但您无法访问该页面并将“price=100”发送到呈现页面的 PHP/ASP 脚本，您必须使用 javascript 获取它然后再次进行 AJAX 获取...
我知道这有点老了，但我正试图弄清楚同样的事情。如果用户想在 url 中输入“price=100”，你能解释一下如何使用 ajax fetch 来让用户拥有“price=100”吗？
加载页面时，检查window.location.hash是否为空。如果里面有东西，解析它，然后根据变量发出适当的 AJAX 请求。

【解决方案3】：

使用 HTML5 是可能的。使用 window.history.pushState()。

例子：

if(currentHref!=window.location){
    window.history.pushState({path:currentHref},'',currentHref);    
}

【讨论】：