Bagaimana untuk Muat Semula Secara Dinamik Kandungan Div Tertentu Menggunakan jQuery/AJAX?

Muat Semula Kandungan dalam Div menggunakan jQuery/AJAX

Keperluan: Muat semula kandungan div tertentu apabila butang klik , tanpa memuat semula keseluruhan halaman.

Coretan Kod:

Pertimbangkan kod berikut:

<code class="html"><div id="step1Content">
    <div id="list">
        <!-- Content to be reloaded -->
    </div>
</div>

<input type="button" id="getCameraSerialNumbers" value="Capture Again" /></code>

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

Kod ini menggunakan beban jQuery () kaedah untuk memuatkan semula kandungan div #list. Location.href mewakili URL halaman semasa dan menambah " #list" padanya menentukan bahawa hanya bahagian halaman yang terkandung dalam div #list harus dimuatkan.

Nota: Ruang antara URL dan "#" kedua adalah penting. Tanpanya, keseluruhan halaman akan dimuatkan ke dalam div #list.

Penjelasan Terperinci:

1. Pengendali Acara: Bila butang "Tangkap Lagi" diklik, pengendali acara yang dilampirkan dicetuskan.
2. Kaedah muat(): Kaedah load() digunakan untuk memuatkan data daripada URL jauh atau yang ditentukan Elemen DOM ke dalam elemen sasaran (#list dalam kes ini).
3. Parameter URL: Location.href yang digabungkan dengan " #list" menentukan bahawa penyemak imbas harus memuatkan kandungan daripada semasa URL halaman, tetapi hanya bahagian yang terkandung dalam div #list.
4. Memuat Semula Kandungan: Setelah kandungan dimuatkan, kandungan sedia ada div #list digantikan dengan kandungan yang baru diambil .

Pendekatan ini membolehkan anda mengemas kini kandungan div tertentu secara dinamik pada halaman web tanpa memuat semula keseluruhan halaman, memberikan pengalaman pengguna yang lebih baik dan mengekalkan keadaan halaman semasa.

Atas ialah kandungan terperinci Bagaimana untuk Muat Semula Secara Dinamik Kandungan Div Tertentu Menggunakan jQuery/AJAX?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!