JQuery / JavaScript 在 URL 中添加查询字符串

Question

I just want to add a Query String in URL when onclick the anchor tag.

URL Like: http://example.me/about/about-me

Below is my code.

$(".popup_dir").on('click', function() { 
    var exmp_id = $(this).attr('exmp_id');
    window.location.search = 'exmp_id='+exmp_id;
});

My Issue is that, when I click it refresh the page and add querystring. But I do not to refresh the page. I want that onclick event it will add / update the Query String Value. That's it.

After onclick event I want this type of URL.

URL Like: http://example.me/about/about-me/?exmp_id=7

Any Help will be appreciating.

Thanks

Answer 1

You can use window.history.pushState to add a new item to the browser's history and update the URL bar, without causing the page to reload:

window.history.pushState({}, "", 'http://example.me/about/about-me/?exmp_id=7');

This function takes three parameters:

• data : Some structured data, such as settings or content, assigned to the history item.
• title : The name of the item in the history drop-down shown by the browser's back and forward buttons.
• url : The URL to this state that should be displayed in the address bar (optional).