Menggunakan teknologi Pjax dalam ThinkPHP6

Dengan perkembangan teknologi Web yang berterusan, kelajuan akses laman web menjadi lebih pantas dan pantas. Walau bagaimanapun, bagi sesetengah aplikasi yang memerlukan penyegaran halaman yang kerap, seperti blog, tapak berita atau media sosial, walaupun dengan tapak web yang pantas, pengguna masih perlu menunggu setiap halaman dimuatkan sepenuhnya sebelum mereka boleh mendapatkan maklumat atau melakukan beberapa operasi. Teknologi Pjax boleh membantu menyelesaikan masalah ini, dan menggunakan Pjax dalam ThinkPHP6 juga agak mudah.

Apakah itu Pjax?

Seluruh proses Pjax ialah PushState+Ajax. Ringkasnya, ia adalah teknik yang menyegarkan sebahagian halaman untuk mengemas kini kandungan tapak web tanpa menyegarkan keseluruhan halaman. Pjax menggunakan teknologi JavaScript dan XMLHttpRequest untuk mencapai matlamat ini, digabungkan dengan API pushState baharu dalam HTML5 untuk membolehkan URL penyemak imbas kekal tidak berubah.

Dalam Pjax, setiap halaman dibahagikan kepada beberapa bahagian, dipanggil "bekas". Hanya kemas kini bekas tertentu apabila pengguna mengklik pautan atau menyerahkan borang. Sebagai contoh, dalam halaman blog, satu bekas boleh mengandungi senarai semua siaran, manakala bekas lain boleh memaparkan butiran siaran yang dipilih. Faedahnya ialah kandungan tertentu boleh dimuatkan dengan lebih pantas, sekali gus meningkatkan kelajuan dan prestasi tapak web, di samping menambah baik pengalaman pengguna.

Menggunakan Pjax dalam ThinkPHP6

Untuk menggunakan Pjax dalam ThinkPHP6, anda perlu memasang pemalam Pjax terlebih dahulu. Pasangnya seperti ini:

composer require ngyuki/pjax

Kemudian tambah kod berikut dalam pengawal untuk mendayakan pjax:

if ($this->request->isPjax()) {
    // 如果是Pjax请求，禁用布局文件
    $this->view->engine->layout(false);
}

Dalam fail paparan, tambah kod berikut untuk menentukan bekas yang perlu dikemas kini dalam Pjax permintaan:

// 设置pjax容器
<div id="pjax-container">
    <?php echo $content; ?>
</div>

// 将pjax链接添加到页面
<a href="http://www.example.com/page" data-pjax="#pjax-container">下一页</a>

Di sini, #pjax-container ialah ID bekas yang perlu dikemas kini dan atribut data-pjax memberitahu penyemak imbas pautan yang perlu diproses dalam permintaan Pjax. Apabila pengguna mengklik pautan, hanya kandungan dalam bekas akan dikemas kini, manakala elemen halaman lain seperti pengepala dan pengaki akan kekal tidak berubah.

Apabila anda perlu memaparkan paparan menggunakan bahagian belakang, anda boleh menetapkan pembolehubah pjax pada templat. Jika pjax didayakan, susun atur ajax boleh digunakan. Contohnya:

// 启用Pjax时使用不同的布局
if ($pjax) {
    $this->view->engine->layout('layouts/ajax');
}

Dalam fail susun atur ajax, semua teg pengepala, navigasi dan pengaki biasanya dialih keluar untuk meningkatkan kelajuan pemuatan dan kandungan yang sepadan digantikan dengan kod JavaScript.

Ringkasan

Teknologi Pjax boleh membantu anda mencapai kelajuan pemuatan halaman yang lebih pantas dan meningkatkan pengalaman pengguna. Menggunakan Pjax dalam ThinkPHP6 juga agak mudah Anda hanya perlu memasang pemalam Pjax, dayakan permintaan Pjax dan tentukan bekas Pjax. Apabila menggunakan Pjax, anda juga boleh menggunakan paparan pemaparan bahagian belakang yang sepadan untuk meningkatkan lagi prestasi.

Atas ialah kandungan terperinci Menggunakan teknologi Pjax dalam ThinkPHP6. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!