halaman lompat jquery tanpa menyegarkan

jQuery ialah perpustakaan JavaScript popular yang sering digunakan untuk membina tapak web dengan cara yang dinamik dan interaktif. Dengan menggunakan jQuery, anda boleh menjadikan tapak web anda lebih menarik dan mesra pengguna sambil memastikan ia responsif. Apabila bercakap tentang JavaScript dan pengeluaran halaman web, melompat ke halaman tanpa menyegarkan adalah tugas yang sangat biasa, dan artikel ini akan memperkenalkan anda kepada cara menggunakan jQuery untuk mencapainya.

Apakah itu halaman lompat tanpa muat semula?

Biasanya, apabila pengguna mengklik pautan atau menyerahkan borang, penyemak imbas menyegarkan keseluruhan halaman. Ini boleh memperkenalkan kelewatan yang tidak perlu yang merendahkan pengalaman pengguna. Ubah hala tanpa segar bermakna anda boleh mengubah hala pengguna ke halaman baharu tanpa memuat semula keseluruhan halaman.

Mengapa menggunakan halaman lompat bukan muat semula?

Dalam aplikasi web moden, halaman lompat tanpa muat semula telah menjadi bahagian yang sangat penting. Ini kerana:

• Pengalaman pengguna yang lebih baik: Halaman lompat tanpa muat semula tidak memuatkan semula keseluruhan halaman, yang bermaksud pengguna tidak perlu lagi menunggu sehingga keseluruhan halaman dimuat semula, menjimatkan masa dan masalah yang tidak perlu.

• Pemuatan pantas: Memandangkan halaman lompat tanpa muat semula boleh memuatkan kandungan halaman secara tidak segerak, ia boleh mempercepatkan pemuatan halaman dan memberikan pengguna pengalaman yang lebih baik.

• Pengoptimuman SEO: Memandangkan keseluruhan halaman tidak akan dimuat semula sepenuhnya, menyegarkan halaman boleh meningkatkan kebolehcapaian halaman, membolehkan Google dan enjin carian lain mengindeks kandungan halaman anda dengan lebih baik.

Menggunakan jQuery untuk melaksanakan halaman lompat bebas muat semula

Setelah mengetahui tentang halaman lompat bebas muat semula dan kelebihannya, mari kita mula melihat cara menggunakan jQuery untuk melaksanakannya.

Menggunakan jQuery adalah sangat mudah, cuma klik beberapa baris kod untuk melengkapkan. Berikut ialah langkah mudah untuk mencapai halaman lompat tanpa muat semula:

• Buat halaman HTML.

• Tambahkan perpustakaan jQuery dalam teg skrip. Anda boleh memuat turun perpustakaan jQuery dari laman web rasmi jQuery.

• Buat fungsi untuk mengendalikan permintaan AJAX.

• Gunakan jQuery untuk mentakrifkan peristiwa untuk mencetuskan fungsi melompat ke halaman tanpa menyegarkan

Mari kita pecahkan proses ini dengan lebih terperinci.

1. Buat halaman HTML

Pertama, anda perlu mencipta halaman HTML, yang mesti mengandungi kandungan berikut:

<meta charset="UTF-8">
<title>jQuery 无刷新跳转页面示例</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<h1>jQuery 无刷新跳转页面示例</h1>
<button id="btn">跳转页面</button>

<script>
    $(document).ready(function() {
        // your code goes here
    });
</script>

Di sini anda dapat melihat bahawa kami telah menambahkan teg HTML yang diperlukan, bersama-sama dengan butang dan teg skrip untuk mengandungi kod JavaScript.

2. Tambah perpustakaan jQuery

Seterusnya, anda perlu menambah perpustakaan jQuery. Di sini kita akan menggunakan jQuery CDN untuk mendapatkan perpustakaan jQuery.

Ini daripada jQuery rasmi Laman web mendapatkan perpustakaan jQuery dan mempercepatkan pemerolehan melalui CDN.

3. Cipta fungsi untuk mengendalikan permintaan AJAX

Seterusnya, dalam jQuery, anda perlu menulis fungsi untuk mengendalikan permintaan AJAX. Sebagai contoh, anda boleh menggunakan kod berikut:

function redirectToPage(url) {

$.ajax({
    url: url,
    type:'GET',
    success: function(data) {
        $('body').html(data);
    },
    error:function (){}

});
}

Fungsi ini akan menerima parameter URL dan gunakan permintaan AJAX menghantarnya ke pelayan. Jika permintaan berjaya, data yang dikembalikan akan dimasukkan ke dalam elemen badan HTML.

4. Gunakan jQuery untuk mentakrifkan acara

Akhir sekali, anda perlu menambah kod jQuery dan mentakrifkan acara untuk mencetuskan fungsi melompat halaman tanpa menyegarkan:

$(dokumen ). ready(function() {

$('#btn').click(function() {
    redirectToPage('http://www.example.com');
});

});

Di sini, fungsi redirectToPage() dicetuskan dengan mendengar peristiwa klik pada butang dan URL 'http:/ /www.example. com' diserahkan kepadanya sebagai parameter.

Dengan cara ini, apabila pengguna mengklik butang, halaman web akan melompat ke halaman baharu tanpa memuat semula.

Ringkasan:

jQuery ialah alat yang sangat berkuasa yang membolehkan pembangun membina aplikasi web interaktif dengan cekap. Halaman lompat tanpa muat semula adalah faktor penting dalam meningkatkan prestasi aplikasi dan pengalaman pengguna. Artikel ini secara ringkas memperkenalkan anda cara menggunakan jQuery untuk mencapai halaman lompat bebas muat semula, dengan itu membina aplikasi web yang lebih interaktif. Menggunakan rutin asas ini, anda boleh mula menggunakan jQuery dengan mudah untuk menulis aplikasi web yang sangat kompleks.

Atas ialah kandungan terperinci halaman lompat jquery tanpa menyegarkan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!