Bagaimana untuk Mengemas kini Kandungan Dinamik tanpa Penyegaran Halaman Menggunakan AJAX?

Kemas Kini Kandungan Dinamik dengan AJAX

Masalah:

Anda bertujuan untuk mengemas kini kandungan div tanpa memuatkan semula halaman apabila mengklik pautan.

Penyelesaian tanpa Menyegarkan:

Menggunakan AJAX (JavaScript Asynchronous dan XML), anda boleh mendapatkan semula kandungan yang dikemas kini tanpa memuat semula halaman.

Pelaksanaan:

1. Kendalikan Acara Pautan dengan JavaScript:

   Tugaskan pengendali acara JavaScript untuk memaut untuk menggunakan fungsi pengambilan data.

   <code class="html"><a href="#" onClick="recp('1')" > One   </a></code>

   Salin selepas log masuk

2. Permintaan AJAX dengan jQuery:

   Fungsi recp() menggunakan .load jQuery () kaedah untuk mendapatkan semula data daripada skrip PHP tanpa memuatkan semula halaman.

   <code class="javascript">function recp(id) {
     $('#myStyle').load('data.php?id=' + id);
   }</code>

   Salin selepas log masuk

3. Mendapatkan Data dengan PHP:

   Buat PHP skrip (cth., data.php) yang mendapatkan semula data berdasarkan ID yang dihantar dalam URL.

   <code class="php"><?php
   require ('myConnect.php');     
   $id = $_GET['id'];
   $results = mysql_query("SELECT para FROM content WHERE  para_ID='$id'");   
   if( mysql_num_rows($results) > 0 )
   {
    $row = mysql_fetch_array( $results );
    echo $row['para'];
   }
   ?></code>

   Salin selepas log masuk

4. Render Kandungan Dikemaskini:

   Data yang diambil dimuatkan ke dalam div dengan id='myStyle'.

   <code class="html"><div id='myStyle'>
   </div></code>

   Salin selepas log masuk

Dengan pelaksanaan ini, mengklik pautan mengemas kini kandungan div secara dinamik, memberikan pengalaman pengguna yang lancar dan responsif tanpa memuat semula halaman.

Atas ialah kandungan terperinci Bagaimana untuk Mengemas kini Kandungan Dinamik tanpa Penyegaran Halaman Menggunakan AJAX?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!