Bagaimana untuk Mengemas kini Bahagian Halaman Web Menggunakan jQuery/AJAX Tanpa Muat Semula?

Cara Mengemas kini Bahagian Halaman Tanpa Muat Semula menggunakan jQuery/AJAX

Memuatkan semula div tertentu pada satu klik butang tanpa menjejaskan keseluruhan halaman adalah keperluan biasa dalam pembangunan web. Ini boleh dicapai menggunakan fungsi AJAX jQuery.

Contoh

Andaikan anda mempunyai butang yang, apabila diklik, harus mengemas kini kandungan div yang dipanggil div1 . Begini cara anda boleh melakukannya:

HTML:

<code class="html"><input type="button" id="myButton" value="Update DIV" />

<div id="div1">
    <!-- Content to be updated -->
</div></code>

jQuery:

<code class="javascript">$("#myButton").click(function() {
    $("#div1").load(location.href + " #div1");
});</code>

Penjelasan:

• Pengendali acara klik jQuery dilampirkan pada butang dengan id myButton.
• Apabila butang diklik, load() dipanggil pada div dengan id div1.
Fungsi
• load() memuatkan kandungan URL yang ditentukan ke dalam div.
Dalam kes ini, URL ialah
• location.href " #div1". Ini mendapatkan semula URL halaman semasa dan menambahkan pemilih #div1.
Ruang sebelum tanda
• # kedua adalah penting. Tanpa itu, kod di atas akan memuatkan semula keseluruhan halaman dalam div.
Akibatnya, apabila butang diklik, kandungan
• div1 akan dikemas kini dengan kandungan yang sama div daripada halaman semasa.

Nota: Ingat untuk memasukkan perpustakaan jQuery sebelum menggunakan kod di atas.

Atas ialah kandungan terperinci Bagaimana untuk Mengemas kini Bahagian Halaman Web Menggunakan jQuery/AJAX Tanpa Muat Semula?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!