jquery 将参数追加到URL而不刷新

tp5buhyn  于 2023-03-07  发布在  jQuery
关注(0)|答案(6)|浏览(201)

我知道这个问题之前已经问过很多次了,但是答案没有足够的描述性来解决我的问题。我不想改变页面的整个URL。我想在按钮点击时附加一个参数&item=brand,而不刷新。
使用document.location.search += '&item=brand';会刷新页面。
使用window.location.hash = "&item=brand"; append而不刷新,但是使用了散列#,这消除了参数的使用/影响。我尝试在append后删除散列,但是没有成功。
This answer和许多其他人建议使用HTML5历史API,特别是history.pushState方法,对于旧的浏览器是设置一个片段标识符,以防止页面重新加载。
假设URL为:http://example.com/search.php?lang=en
如何使用HTML5 pushState方法或片段标识符追加&item=brand,使输出如下所示:http://example.com/search.php?lang=en&item=brand而不刷新页面?
我希望有人能解释一下如何使用HTML5 pushState来给一个现有的/当前的URL附加一个参数,或者如何设置一个片段标识符来达到同样的目的。一个好的教程,演示或一段代码加上一点解释会很棒。
到目前为止我所做的一切。你的回答将不胜感激。

gxwragnw

gxwragnw1#

可以使用pushStatereplaceState方法,即:

window.history.pushState("object or string", "Title", "new url");

window.history.replaceState(null, null, "?arg=123");

带参数的示例:

var refresh = window.location.protocol + "//" + window.location.host + window.location.pathname + '?arg=1';    
window.history.pushState({ path: refresh }, '', refresh);
laawzig2

laawzig22#

如果要同时添加和删除参数,也可以使用URL API:

const url = new URL(window.location.href);
url.searchParams.set('param1', 'val1');
url.searchParams.delete('param2');
window.history.replaceState(null, null, url); // or pushState
jmp7cifd

jmp7cifd3#

如果有人想给一个更复杂的url(我的意思是https://stackoverflow.com/questions/edit?newParameter=1)添加一个参数,下面的代码很适合我:

var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?newParameter=1';
window.history.pushState({ path: newurl }, '', newurl);

希望这有帮助!

rqdpfwrv

rqdpfwrv4#

修改了Medhi答案,这就成功了

const insertParam = (key: string, value: string) => {
    key = encodeURIComponent(key);
    value = encodeURIComponent(value);

    let kvp = window.location.search.substr(1).split('&');
    if (kvp[0] === '') {
        const path = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + key + '=' + value;
        window.history.pushState({ path: path }, '', path);

    } else {
        let i = kvp.length; let x; while (i--) {
            x = kvp[i].split('=');

            if (x[0] === key) {
                x[1] = value;
                kvp[i] = x.join('=');
                break;
            }
        }

        if (i < 0) { 
            kvp[kvp.length] = [key, value].join('=');
        }

        const refresh = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + kvp.join('&');  
        window.history.pushState({ path: refresh }, '', refresh);
    }
}
k2fxgqgv

k2fxgqgv5#

export function getHash(hash: string, key: string): string | undefined {
  return hash
    .split("#")
    .find((h) => h.startsWith(key))
    ?.replace(`${key}=`, "");
}
export function setHash(hash: string, key: string, value: string): string {
  let hashArray = hash.split("#").filter((h) => !h.startsWith(key));
  hashArray.push(`${key}=${value}`);
  return hashArray.length > 0
    ? hashArray.reduce((s1, s2) => `${s1}#${s2}`)
    : "";
}
export function deleteHash(hash: string, key: string): string {
  let hashArray = hash.split("#").filter((h) => !h.startsWith(key));
  return hashArray.length > 0
    ? hashArray.reduce((s1, s2) => `${s1}#${s2}`)
    : "";
}
relj7zay

relj7zay6#

如果您想在当前url中附加多个参数而不重新加载页面,请尝试以下操作:

window.history.replaceState(null, null, `?${$.param({
   item: 'brand',
   lang: 'en',
})}`);

$.param会将你的对象转换为item=brand&lang=en,然后在开始处添加?
结果将是:httpts://app.com/index?item=brand&lang=en

相关问题