Utilisez pjax pour modifier l'URL de la page sans les conseils defresh_javascript

Nous savons tous qu'ajax apporte des capacités de chargement asynchrone aux navigateurs, ce qui améliore l'expérience utilisateur en termes de vérification des données, d'actualisation partielle, etc., mais en même temps, il existe les problèmes suivants :

1. Le contenu de la page peut être modifié sans actualisation, mais l'URL de la page ne peut pas être modifiée
2. La méthode de hachage ne peut pas bien gérer les problèmes de navigation avant et arrière

Afin de résoudre les problèmes causés par l'ajax traditionnel, l'API d'historique a été renforcée en HTML5, en ajoutant les interfaces pushState, replaceState et les événements popstate. Je ne le présenterai pas en détail ici. Il est recommandé aux étudiants qui ne possèdent pas ces connaissances de lire d'abord les informations pertinentes.

Le plug-in pjax encapsule les opérations pushState et ajax, nous fournissant une méthode simple pour développer ce type d'application Web. Les étapes spécifiques sont les suivantes :

Définir les conteneurs qui nécessitent des mises à jour partielles

Initialisez pjax et écoutez l'URL

Copier le code Le code est le suivant :

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

Le backend gère les requêtes pjax

La logique de traitement du backend consiste à déterminer d'abord s'il s'agit d'une requête pjax. Si tel est le cas, renvoyez le contenu local en fonction des paramètres de la requête, sinon renvoyez la mise en page, puis lancez pjax par `$.pjax.reload. ("#conteneur");` demandez. Sur la base de la logique ci-dessus, le code suivant peut être écrit :

Copier le code Le code est le suivant :

var pjaxFilter = fonction (req, res, suivant) {
if (req.get('X-PJAX')) {
suivant();
revenir ;
>
//S'il ne s'agit pas d'une requête pjax, renvoie directement le modèle de mise en page
res.render('layout', { title: 'Pjax simple demo' });
};
router.get('/', pjaxFilter, function(req, res) {
res.render('index');
});
router.get('/poem/:id', pjaxFilter, function(req, res) {
var poèmeId = req.params.id;
res.render('poem/'poemId);
})

Code complet : pjax-demo

Ceci n'est que la fonction la plus basique de pjax qui fournit une API riche, veuillez visiter : jquery-pjax