使用JS或jQuery更改或更新瀏覽器地址欄中查詢字符串的可見部分？

我想知道是否有任何解決方案通過點擊通過JavaScript或Jquery的一些複選框來更改或更新URL的查詢字符串部分（在瀏覽器的地址欄中可見）與一些新的值。我想在沒有任何jQuery插件的情況下做到這一點。使用JS或jQuery更改或更新瀏覽器地址欄中查詢字符串的可見部分？

當用戶點擊組中的任何複選框時，將根據用戶選中的複選框值從數據庫中提取數據。與此同時，URL的查詢字符串也將隨着新的更新值而更改。請注意，在整個過程中，頁面將不會重新加載。選中複選框後，我們可以運行AJAX。我們如何實現這一目標？演示將非常感謝。

來源

2016-07-31 user5307298

[用新的URL更新地址欄而沒有散列或重新加載頁面]可能的重複（http://stackoverflow.com/questions/3338642/updating-address-bar-with-new-url-without-hash-or-reloading-該頁） –

http://stackoverflow.com/questions/824349/modif y-the-url-without-reload-the-page –

是的，這是一件很常見的事情。 window.replaceState是您正在尋找的功能。或者，如果您想允許用戶能夠將back設置爲之前的複選框狀態，您也可以使用pushState，但這樣做更多，但並不總是預期的。

然後，您實際上需要將某個網址更改爲另一個網址。將URL作爲字符串操作會產生反效果，因此您可以使用庫如URI.js。

來源

2016-07-31 08:05:33 Kos

使用的window.history像這樣：

window.history.pushState('page2', 'Title', '/new-uri');

對於你的情況，你將有2個嵌套函數：事件監聽器包含AJAX調用回調+這個Ajax調用：

$('[input]').change(function(){ 
     if(this.checked){ 
      //AJAX 
      $.get("URL",{},function(data){ 
       //AJAX - Callback 
       window.history.pushState('page2', data.title, data.url); 

      }); 

     } 
});

來源

2016-07-31 08:09:28

如果你處理'pushState'，那麼你還需要處理'onpopstate'事件。否則，您會破壞用戶瀏覽器中的後退按鈕。 'replaceState'更簡單，而不是'pushState'，因爲它不會在歷史中添加一個單獨的步驟。 – Kos

使用JS或jQuery更改或更新瀏覽器地址欄中查詢字符串的可見部分？

回答

相關問題