I know this has been asked many times before but answers were not descriptive enough to solve my problem. I don't want to change the whole URL of page. I want to append a parameter &item=brand on button click without refresh.

Using document.location.search += '&item=brand'; makes the page refresh.

Using window.location.hash = "&item=brand"; append without refresh but with a hash # which eliminates the usage/effect of the parameter. I tried to remove the hash after appending but that didn't work.


This answer和许多其他浏览器建议使用HTML5 History API,特别是history.pushState方法,并且对于旧的浏览器,设置片段标识符以防止页面重新加载.但是怎么做呢?


Assuming the URL is: http://example.com/search.php?lang=en

如何使用HTML5 Push State方法或片段标识符追加&item=brand,以便在不刷新页面的情况下输出如下所示:http://example.com/search.php?lang=en&item=brand


我希望有人能对如何使用HTML5 pushState将参数附加到现有/当前URL上有所帮助.或者,如何为同样的目的设置片段标识符.一个好的教程、演示或一段代码,再加上一点解释就好了.

到目前为止,我已经做了Demo件事.非常感谢您的回答.

推荐答案

您可以使用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);

Jquery相关问答推荐

如何使用 jQuery 强制悬停状态?

jQuery非只读 Select 器

jquery数据表隐藏列

未捕获的类型错误:无法读取未定义的属性toLowerCase

提交前添加 POST 参数

.slice(0) 在这里有什么意义?

jQuery/JavaScript 碰撞检测

Select select2后触发动作

谷歌图表重绘/zoom 窗口调整大小

禁用表单提交上的提交按钮

jQuery.extend 和 jQuery.fn.extend 的区别?

如何触发href元素的点击事件

jQuery UI 中的 disableSelection 用于什么?

超时 jQuery 效果

如何在调用 Ajax 等异步调用时让代码等待

请求的资源错误中不存在Access-Control-Allow-Origin标头

CORS - 如何预检httprequest?

删除所有以某个字符串开头的类

bootstrap 日期和时间 Select 器

在 JavaScript 开头使用分号的目的是什么?