pjax を使用して、refreshing_javascript を使用せずにページ URL を変更する_javascript のヒント

ajax がブラウザーに非同期読み込み機能をもたらし、データ検証や部分更新などの点でユーザー エクスペリエンスが向上することは誰もが知っていますが、同時に次の問題もあります。

1. ページのコンテンツは更新せずに変更できますが、ページの URL は変更できません
2. ハッシュメソッドはブラウザの前後の問題をうまく処理できません

従来の ajax によって引き起こされる問題を解決するために、HTML5 では履歴 API が強化され、pushState、replaceState インターフェイス、popstate イベントが追加されました。ここでは詳しく紹介しませんが、この知識がない学生は、まず関連情報を読むことをお勧めします。

pjax プラグインは、pushState と ajax 操作をカプセル化し、このタイプの Web アプリケーションを開発する簡単な方法を提供します。具体的な手順は次のとおりです。

部分的な更新が必要なコンテナを定義する

pjax を初期化し、URL をリッスンします

コードをコピーします コードは次のとおりです:

$(関数(){
// pjax
$(document).pjax('a', '#container');
$.pjax.reload('#container');
})

バックエンドは pjax リクエストを処理します

バックエンドの処理ロジックは、最初にそれが pjax リクエストであるかどうかを判断し、そうである場合はリクエスト パラメーターに従ってローカル コンテンツを返し、それ以外の場合はレイアウト レイアウトを返し、その後 `$.pjax.reload によって pjax を開始します。 ('#container');` 尋ねてください。上記のロジックに基づいて、次のコードを作成できます:

コードをコピーします コードは次のとおりです:

var pjaxFilter = function(req, res, next) {
if (req.get('X-PJAX')) {
next();
戻る;
}
//pjax リクエストではない場合は、レイアウト テンプレートを直接返します
res.render('layout', { title: 'Pjax の簡単なデモ' });
};
router.get('/', pjaxFilter, function(req, res) {
res.render('index');
});
router.get('/poem/:id', pjaxFilter, function(req, res) {
var poemId = req.params.id;
res.render('poem/' 詩 ID);
})

完全なコード: pjax-demo

これは pjax の最も基本的な機能です。pjax は豊富な API を提供しています。jquery-pjax
を参照してください。