Gunakan pjax untuk menukar url halaman tanpa petua refreshing_javascript

Kita semua tahu bahawa ajax membawa keupayaan pemuatan tak segerak kepada penyemak imbas, yang meningkatkan pengalaman pengguna dari segi pengesahan data, penyegaran separa, dll., tetapi pada masa yang sama, terdapat masalah berikut:

1. Kandungan halaman boleh ditukar tanpa memuat semula, tetapi URL halaman tidak boleh ditukar
2. Kaedah cincang tidak dapat menangani isu ke hadapan dan ke belakang pelayar dengan baik

Untuk menyelesaikan masalah yang disebabkan oleh ajax tradisional, API sejarah telah diperkukuh dalam HTML5, menambah pushState, antara muka replaceState dan acara popstate. Saya tidak akan memperkenalkannya secara terperinci di sini Pelajar yang tidak mempunyai pengetahuan ini disyorkan untuk membaca maklumat yang berkaitan terlebih dahulu.

Pemalam pjax merangkumkan operasi pushState dan ajax, memberikan kami kaedah mudah untuk membangunkan aplikasi web jenis ini Langkah-langkah khusus adalah seperti berikut:

Tentukan bekas yang memerlukan kemas kini separa

Mulakan pjax dan dengar URL

Salin kod Kod adalah seperti berikut:

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

Backend mengendalikan permintaan pjax

Logik pemprosesan bahagian belakang adalah untuk menentukan terlebih dahulu sama ada ia adalah permintaan pjax Jika ya, kembalikan kandungan setempat mengikut parameter permintaan, jika tidak, kembalikan reka letak reka letak, dan kemudian mulakan pjax dengan `$.pjax.reload. ('#bekas');` tanya. Berdasarkan logik di atas, kod berikut boleh ditulis:

Salin kod Kod adalah seperti berikut:

var pjaxFilter = function(req, res, next) {
jika (req.get('X-PJAX')) {
seterusnya();
kembali;
}
//Jika ia bukan permintaan pjax, kembalikan templat reka letak terus
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 poemId = req.params.id;
res.render('poem/' poemId);
})

Kod penuh: pjax-demo

Ini hanyalah fungsi paling asas pjax yang menyediakan API yang kaya, sila lawati: jquery-pjax