Bagaimana Mengemas kini Kandungan DIV secara Dinamik dengan Ajax, PHP dan jQuery?

Mengubah suai Kandungan DIV Menggunakan Ajax, PHP dan jQuery

Dalam pembangunan web, selalunya perlu mengemas kini bahagian halaman tanpa memuatkan semula keseluruhan halaman. Ini boleh dicapai menggunakan Ajax, PHP dan jQuery.

Pernyataan Masalah

Halaman mengandungi elemen DIV yang memegang teks sumber pangkalan data dan senarai hiperpautan. Objektifnya adalah untuk memuatkan ringkasan (teks) yang dikaitkan dengan pautan tertentu ke dalam DIV apabila mengklik pautan itu.

Penyelesaian

HTML:

Cipta DIV dan elemen pautan seperti yang diterangkan:

<code class="html"><div id="summary">Here is summary of movie</div>

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

JavaScript (jQuery):

Kendalikan acara klik pada pautan:

<code class="javascript"><script>
function getSummary(id) {
  $.ajax({
    type: "GET",
    url: 'your_php_url',
    data: "id=" + id,
    success: function(data) {
      $('#summary').html(data);
    }
  });
}
</script></code>

PHP:

Kendalikan permintaan GET dalam fail PHP:

<code class="php">// get the ID from the request
$id = $_GET['id'];

// fetch the summary from the database
$summary = get_summary($id);

// return the summary as a string
echo $summary;</code>

Pengikatan Acara:

Tambah atribut acara onclick pada pautan untuk memanggil fungsi getSummary:

<code class="html"><a onclick="getSummary('1')">View Text</a>
<div id="#summary">This text will be replaced when the onclick event (link is clicked) is triggered.</div></code>

Atas ialah kandungan terperinci Bagaimana Mengemas kini Kandungan DIV secara Dinamik dengan Ajax, PHP dan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!