Bagaimana Mengemas kini Kandungan DIV Secara Dinamik Menggunakan AJAX, PHP dan jQuery melalui Klik Pautan?

Mengemas Kini Kandungan DIV Secara Dinamik melalui AJAX, PHP dan jQuery

Soalan: Bagaimanakah anda boleh mengemas kini kandungan secara dinamik elemen DIV menggunakan AJAX, PHP dan jQuery, di mana setiap klik pautan mendapatkan semula data daripada pangkalan data dan menggantikan DIV dengan ringkasan yang diambil?

Jawapan:

Langkah 1: Buat Struktur HTML

• Sertakan elemen DIV yang akan memaparkan ringkasan:

<code class="html"><div id="summary"></div></code>

• Tambah senarai pautan yang mencetuskan proses mendapatkan semula ringkasan:

<code class="html"><a href="?id=1" class="movie">Name of movie</a>
<a href="?id=2" class="movie">Name of movie</a></code>

Langkah 2: Laksanakan Skrip jQuery

• Buat fungsi jQuery untuk mengendalikan AJAX meminta dan mengemas kini DIV:

<code class="javascript"><script>
function getSummary(id) {
  $.ajax({
    type: "GET",
    url: 'Your URL',
    data: "id=" + id, // appears as $_GET['id'] @ your backend side
    success: function(data) {
      // data is your summary
      $('#summary').html(data);
    }
  });
}
</script></code>

Langkah 3: Tambah Acara Klik pada Pautan

• Tambahkan acara onclick pada setiap pautan, melepasi ID yang sepadan:

<code class="html"><a onclick="getSummary('1')">View Text</a></code>

Langkah 4: PHP Sisi Pelayan

• Dalam skrip PHP pada URL yang dinyatakan dalam $. ajax(), dapatkan semula ringkasan berdasarkan ID yang diterima:

<code class="php">$id = $_GET['id'];
$summary = fetchSummary($id); // Fetch summary from database</code>

• Kembalikan ringkasan yang diambil sebagai rentetan:

<code class="php">echo $summary;</code>

Dengan mengklik pautan, fungsi jQuery akan mencetuskan permintaan AJAX, mengambil ringkasan daripada skrip PHP dan mengemas kini DIV dengan kandungan yang diambil.

Atas ialah kandungan terperinci Bagaimana Mengemas kini Kandungan DIV Secara Dinamik Menggunakan AJAX, PHP dan jQuery melalui Klik Pautan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!