web-dev-qa-db-ja.com

history.pushState（）を使用してURLのパラメーターを更新する

History.pushStateを使用して、AJAXを呼び出した後、現在のページURLにいくつかのパラメーターを追加します。ユーザーアクションに基づいて同じページで、ページURLを再度更新します。同じまたは追加のパラメータのセットですので、私のコードは次のようになります。

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

queryStringは、クエリパラメータのリストです。

しかし、上記のコードを使用すると、paramsがURLに追加され、2番目のAJAX呼び出しの後、次のようになります。

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

したがって、パラメータはURLに2回表示されますが、ヒストリにプッシュする前にURLのパラメータを置き換える方法や、javascript（jquery）でこれを達成する他のより良い方法はありますか？

javascriptjqueryajaxurl
19
Kush

必要なのは削除window.location.href そして去る '?' +。

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

この機能は役に立つかもしれません

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

編集：次の解決策はより単純であり、パラメーターがまだURLの一部ではない場合にも機能します。ただし、Internet Explorerではサポートされていません（言わないのですか？）。

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