Verwenden Sie pjax, um die Seiten-URL ohne „refreshing_javascript“-Tipps zu ändern

Wir alle wissen, dass Ajax den Browsern asynchrone Ladefunktionen bietet, was die Benutzererfahrung in Bezug auf Datenüberprüfung, teilweise Aktualisierung usw. verbessert, aber gleichzeitig gibt es die folgenden Probleme:

1. Der Seiteninhalt kann ohne Aktualisierung geändert werden, die Seiten-URL kann jedoch nicht geändert werden
2. Die Hash-Methode kann Browser-Vorwärts- und Rückwärtsprobleme nicht gut verarbeiten

Um die durch herkömmliches Ajax verursachten Probleme zu lösen, wurde die Verlaufs-API in HTML5 gestärkt und um PushState-, ReplacementState-Schnittstellen und Popstate-Ereignisse erweitert. Ich werde es hier nicht im Detail vorstellen. Studierenden, die nicht über diese Kenntnisse verfügen, wird empfohlen, zuerst die entsprechenden Informationen zu lesen.

Das Pjax-Plug-In kapselt PushState- und Ajax-Operationen und bietet uns eine einfache Methode zum Entwickeln dieser Art von Webanwendung. Die spezifischen Schritte sind wie folgt:

Definieren Sie Container, die teilweise Aktualisierungen erfordern

Initialisieren Sie pjax und hören Sie sich die URL an

Code kopieren Der Code lautet wie folgt:

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

Backend verarbeitet Pjax-Anfragen

Die Verarbeitungslogik des Backends besteht darin, zunächst zu bestimmen, ob es sich um eine Pjax-Anfrage handelt. Wenn ja, geben Sie den lokalen Inhalt gemäß den Anforderungsparametern zurück, andernfalls geben Sie das Layout-Layout zurück und initiieren Sie dann Pjax durch „$.pjax.reload“. ('#container');` fragen. Basierend auf der obigen Logik kann der folgende Code geschrieben werden:

Code kopieren Der Code lautet wie folgt:

var pjaxFilter = function(req, res, next) {
if (req.get('X-PJAX')) {
next();
zurück;
}
//Wenn es sich nicht um eine Pjax-Anfrage handelt, geben Sie die Layoutvorlage direkt zurück
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 poetId = req.params.id;
res.render('gedicht/' gedichtId);
})

Vollständiger Code: pjax-demo

Dies ist nur die grundlegendste Funktion von pjax. pjax bietet eine umfangreiche API, besuchen Sie bitte: jquery-pjax