Bagaimana untuk Muat Semula Kandungan Div dengan jQuery dan Ajax pada Klik Butang?

Muat Semula Kandungan Div dengan jQuery dan Ajax

Masalah:

Anda perlu memuatkan semula kandungan div tertentu pada klik butang tanpa memuat semula keseluruhan halaman.

Contoh Kod:

<code class="html"><div role="button" class="marginTop50 marginBottom">
  <input type="button" id="getCameraSerialNumbers" value="Capture Again" class="disabled">
  <input type="button" id="confirmNext" value="Confirm & Proceed" class="disabled marginLeft50">
</div>

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

Pendekatan Salah:

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

Kod ini tidak betul kerana kaedah load() memerlukan URL untuk memuatkan kandungan.

Penyelesaian:

loading jQuery( ) kaedah boleh digunakan dengan URL untuk memuatkan kandungan jauh. Walau bagaimanapun, untuk memuat semula kandungan daripada halaman semasa, kami boleh menggunakan pendekatan berikut:

1. Gunakan URL Mutlak dengan Cincang:

<code class="javascript">$("#list").load(location.href + " #list");</code>

Ini memuatkan kandungan elemen dengan "senarai" ID daripada URL semasa. Perhatikan ruang sebelum tanda "#" kedua.

2. Gunakan Ajax:

Pendekatan lain ialah menggunakan Ajax. Dengan pendekatan ini, kami membuat permintaan Ajax kepada pelayan, mendapatkan semula kandungan dan mengemas kini div.

<code class="javascript">$("#getCameraSerialNumbers").click(function () {
  $.ajax({
    url: "YOUR_ENDPOINT_URL",
    success: function (data) {
      $("#list").html(data);
    },
  });
});</code>

Dalam kes ini, "YOUR_ENDPOINT_URL" ialah titik akhir pelayan yang mengembalikan kandungan untuk dimuatkan ke dalam div.

Nota Tambahan:

1. Pastikan butang "Tangkap Lagi" didayakan sebelum memuatkan semula kandungan.
2. Jika anda menggunakan pendekatan Ajax, pastikan titik akhir pelayan mengembalikan kandungan dalam format yang sesuai (HTML atau JSON).

Atas ialah kandungan terperinci Bagaimana untuk Muat Semula Kandungan Div dengan jQuery dan Ajax pada Klik Butang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!