如何在不重新加载的情况下修改 URL 查询字符串

Posted

技术标签:

【中文标题】如何在不重新加载的情况下修改 URL 查询字符串【英文标题】:How to modify URL Query String without reload 【发布时间】:2018-03-11 15:21:21 【问题描述】:

我正在使用以下方法更改与表单上的输入/下拉列表对应的查询 URL 参数。目前window.location.href 将导致页面在更改时重新加载。如何集成history.replaceState()而不是重新加载修改URL?

正则表达式函数

function replaceQueryString(url, param, value) 
    var re = new RegExp("([?|&])" + param + "=.*?(&|$)", "i");
    if (url.match(re))
        return url.replace(re, '$1' + param + "=" + value + '$2');
    else
        return url + '&' + param + "=" + value;

输入变化时

$("#input_field").on('change', function(e) 
    window.location.href = replaceQueryString(window.location.href, 'input_value', $(this).val());
);

更新

我现在已经设法在更改时将 URL 更新为值 domain.com/2,但是如何通过 replaceQueryString 函数运行它以将其解析为 domain.com/?input_value=2

$("#input_field").on('change', function(e) 
     window.history.replaceState("#input_field", "input_value", $(this).val());
);

【问题讨论】:

预期结果是什么? @guest271314 它应该将 URL 更改为 domain.com/?input_value=3&next_filter_value=2 等。 代码在哪里调用.replaceState() window.history.replaceState(, "input_value", replaceQueryString(location.href, "input_value", $(this).val()))? 见developer.mozilla.org/en-US/docs/Web/API/History_API 【参考方案1】:

replaceQueryString()函数传递给.replaceState()的第三个参数

window.history.replaceState(
, "input_value"
, replaceQueryString(location.href, "input_value", $(this).val()));

【讨论】:

以上是关于如何在不重新加载的情况下修改 URL 查询字符串的主要内容,如果未能解决你的问题,请参考以下文章

如何在不重新加载页面的情况下更改页面 url

如何在不重新加载页面的情况下更改 URL?

如何在不更改 javascript 中的 URL 的情况下重新加载当前页面一次?

react-router:如何在不导致导航/重新加载的情况下更新 url?

Facebook 如何在不重新加载页面或使用 # 或的情况下更改浏览器地址栏中的 URL?

有啥方法可以在不重新加载的情况下更改标头 URL? [复制]