jquery - リロードせずにURLのクエリ文字列を変更する

Question

クエリ文字列を渡して製品をフィルタリングしています。しかし、問題は、フィルターを選択するたびにクエリがURLに追加され、ページがリロードされることです。ページをリロードしたくありません。クエリ文字列を渡し、ajax 呼び出しを行って製品をフィルタリングするだけです。フリップカートがやっているように

これは私のページです

これらを手伝わせてください。

Answer 1

を使用できますjquery ajax。単純すぎる

渡されたURLパラメータに基づいて結果を返すashx/asmxページを作成する必要があります。結果としてaを返すことをお勧めしJSONます。

jQueryajaxは以下のように使用できます。jQuery API

$.ajax({
  url: "GetItems.ashx?design=1";
}).done(function() { 
  alert("Got the results");
});

次に、jQueryテンプレートを使用してJSONデータをレンダリングできます。jQuery API

Answer 2

一部の HTML5 互換 Web ブラウザーは、必要に応じて使用できる履歴 API を実装しています。

if (history.pushState) {
    var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?myNewUrlQuery=1';
    window.history.pushState({path:newurl},'',newurl);
}

テストしましたが、うまくいきました。ページをリロードしませんが、URL クエリを変更することしかできません。プロトコルまたはホストの値を変更することはできません。

詳細については：

http://diveintohtml5.info/history.html

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history