如何在不重新加载的情况下修改 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 查询字符串的主要内容,如果未能解决你的问题,请参考以下文章
如何在不更改 javascript 中的 URL 的情况下重新加载当前页面一次?
react-router:如何在不导致导航/重新加载的情况下更新 url?