2016-07-31 4 views
0

JavaScriptやJqueryでいくつかのチェックボックスをクリックすると、URLのクエリ文字列部分(ブラウザのアドレスバーに表示される)をいくつかの新しい値で変更または更新するソリューションがあるのでしょうか。私はこれをjQueryプラグインなしでやりたいJSまたはjQueryを使用してブラウザのアドレスバーに表示されるクエリ文字列の表示部分を変更または更新しますか?

ユーザーがグループ内の任意のチェックボックスをクリックすると、ユーザーが選択したチェックボックスの値に基づいてデータがデータベースからフェッチされます。それに伴い、URLのクエリ文字列も新しい更新値で変更されます。この手順ではページが再ロードされないことに注意してください。チェックボックスをオンにすると、AJAXを実行できます。私たちはこれをどのように達成できますか?デモは非常に高く評価されます。

+2

あなたのケースでは

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

、あなたは2つのネストされた機能を持っています[ハッシュのない新しいURLでアドレスバーを更新する、またはページをリロードする]の可能な複製(http://stackoverflow.com/questions/3338642/updating-address-bar-with-new-url-without-hash-or-reloading- the-page) –

+0

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

答えて

0

これは非常に一般的なことです。 window.replaceStateはあなたが探している機能です。また、pushStateを使用して、ユーザがbackを以前のチェックボックスの状態に戻せるようにすることもできますが、それはもっとうまく機能しているとは必ずしも思えません。

また、実際にはあるURLを別のURLに変更する必要があります。 URLを文字列として操作することは生産的ではないので、代わりにURI.jsのようなライブラリを使用できます。そのような

0

使用window.history:イベントリスナーのAJAX呼び出し+このAJAX呼び出しのコールバックが含まれています:

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

      }); 

     } 
}); 
+0

'pushState'を処理するなら、' onpopstate'イベントも処理する必要があります。それ以外の場合は、ユーザーのブラウザで戻るボタンを解除します。 'replaceState'は' pushState'の代わりに簡単です。これは履歴に別のステップを追加しないからです。 – Kos

関連する問題