2

自分の e コマース Web サイトに AJAX フィルタリングを実装しようとしていて、最適なソリューションを探しています。

私が思いついたのは次のとおりです。

すべてのコンテンツを静的に生成します (サーバー側で構築し、同じページでパラメータを使用して ajax リクエストを呼び出します)。唯一の短所は、ユーザーの URL ページが変更されないため、過去の履歴がないことです。

history.api などを実装しようとしましたが、ここでこの素晴らしいフィルタリングを見ました: http://trendygolf.com/shop?brand[]=15&brand[]=27&price-min=0&pricemax=2000&sort=newest

私が見るところ、ページをリロードせずに AJAX 呼び出しを行い、URL を変更しますが、それはどのように可能でしょうか?

そしてもちろん、古い html ページをリクエストからの新しいページに置き換えるだけです。

これについて、ベスト プラクティス、長所と短所、トレンディゴルフがどのようにしてこのような成果を上げているかについて、ぜひお聞かせください。

4

3 に答える 3

2

URL の更新に関しては、HTML5 の一部ですが、IE のサポートが 100% 確実というわけではありません。これはうまくいきます：

window.history.pushState(“object or string”, “Title”, “/new-url”);

この種のことの詳細については、Mozilla のドキュメントをご覧ください: https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history

于 2013-01-24T10:03:18.727 に答える
1

ブラウザの状態/URL を JavaScript から変更できるHistory.jsライブラリを使用できるようです。基本的に、このライブラリは HTML5 History API が利用可能な場合はそれを使用しますが、これをサポートしていないブラウザーでエミュレートできます。ただし、History.js は低レベル API であり、その上で Router 抽象化を使用すると、プログラミングが大幅に簡素化されます。この目的のために、私はStateRouter.jsライブラリを実装しました。

StateRouter.js の使用方法の簡単な例:

function getHome() {
}
function getPersons() {
}
function getPerson(id) {
}

var router = new staterouter.Router();
// Configure routes
router
  .route('/', getHome)
  .route('/persons', getPersons)
  .route('/persons/:id', getPerson);

$(document).ready(function () {
    // Perform initial routing
    router.perform();

    // Navigate to a URL
    router.navigate('/persons/1');

    // Go back
    router.back();

    // Go forward
    router.go(1);
});
于 2013-01-24T12:49:44.447 に答える
1


ajax呼び出しで履歴/状態を維持する必要がある場合にnewmuによって提供される回答に加えて、hashtags
シンボルハッシュ（ '＃'）の後のURLの一部である使用する必要があります。 履歴 API がまだサポートされていないブラウザーで#は、URL の後に書いたものはサーバーに送信されません ハッシュタグは状態を維持するために使用されます また、ハッシュタグはページをリロードせずに変更できます


于 2013-01-24T10:41:08.360 に答える