javascript - 使用history.pushState()更新URL中的参数

Question

在我的页面上进行 AJAX 调用后，我使用 history.pushState 将一些参数附加到当前页面 URL。现在，在基于用户操作的同一页面上，我想使用相同或附加的参数集再次更新页面 URL。所以我的代码如下所示:

var pageUrl = window.location.href + "?" + queryString;
window.history.pushState('','',pageUrl);

queryString 是我的查询参数列表。

• 例如，我的默认页面 URL:http://sample.com/
• 在同一页面上第一次 AJAX 调用后 URL 应为:http://sample.com?param1=foo&param2=bar
• 在同一页面上进行第二次 AJAX 调用后，URL 可以是: http://sample.com/?param1=foo,foo1&param2=bar&param3=another_foo

但是通过上面的代码，我的参数被附加到带有参数的 URL 中，在第二次 AJAX 调用后它们看起来如下所示:

http://sample.com?param1=foo&param2=bar&param1=foo,foo1&param2=bar&param3=another_foo

所以参数在 URL 中出现两次，在推送到历史记录之前有没有办法替换 URL 中的参数，或者有其他更好的方法在 javascript(jquery) 中实现此目的？

Answer 1

我认为您需要删除 window.location.href 并保留 '?' +.

var pageUrl = '?' + queryString;
window.history.pushState('', '', pageUrl);