Question

我正在使用history.pushState在我的页面上进行AJAX调用后将几个参数附加到当前页面URL。现在，在基于用户操作的同一页面上，我想使用相同或更多的参数集再次更新页面URL。所以我的代码看起来像这样：

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

queryString是我的查询参数列表。

例如，我的默认网页网址：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

但是使用上面的代码，我的params被附加到带有params的URL，并且在第二次AJAX调用后它们看起来如下所示：

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

所以params在URL中出现两次，是否有任何方法可以在推送到History之前替换URL中的params或者在javascript（jquery）中实现此目的的任何其他更好的方法？

Answer 1

我认为您需要的是移除window.location.href并离开'?' +。

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

Answer 2

此功能可能会有所帮助

function updateUrlParameter(param, value) {
    const regExp = new RegExp(param + "(.+?)(&|$)", "g");
    const newUrl = window.location.href.replace(regExp, param + "=" + value + "$2");
    window.history.pushState("", "", newUrl);
}

编辑：以下解决方案更简单，如果参数还不是网址的一部分，它也可以使用。但是，Internet Explorer不支持它（你不能说？）。

function setQueryStringParameter(name, value) {
    const params = new URLSearchParams(location.search);
    params.set(name, value);
    window.history.replaceState({}, "", decodeURIComponent(`${location.pathname}?${params}`));
}

Answer 3

嗨为了保留网址的最后一部分并仅使用参数，您可以像这样创建一个新的网址对象：

// e.g url: sample.com/testpage/test

var url = new URL(window.location);
url.searchParams.set('foo', 'bar');
window.history.pushState({}, '', url);

// outcome: sample.com/testpage/test?foo=bar

// you can remove, just the param part, like so:
url.searchParams.delete('foo');

Answer 4

管理当前 URL 中的查询参数

此函数与其他答案类似，但不使用 RegExp 和字符串连接。

参数：

name - 查询参数的字符串名称。
value - 参数的字符串值。
append - 如果为真：这个函数总是添加一个新参数。当您需要添加两个具有相同名称的参数时，这非常有用，例如：localhost:8080/some_page?foo=100500&foo=ABC。否则，该参数将被更改（如果不存在则添加）。

function setQueryStringParameter(name, value, append=false) {
    const url = new URL(window.document.URL);
    if (append) url.searchParams.append(name, value);
    else url.searchParams.set(name, value);
    window.history.replaceState(null, "", url.toString());
}

使用history.pushState（）更新URL中的参数

4 个答案:

管理当前 URL 中的查询参数