Bagaimanakah Saya Boleh Mengubah Kandungan Halaman HTML Secara Dinamik Tanpa Menyegarkan Halaman Menggunakan AJAX?

Tukar Kandungan Halaman HTML Tanpa Muat Semula Menggunakan AJAX

Anda mahu mengemas kini kandungan elemen DIV tanpa memuat semula halaman apabila pautan diklik. Begini cara anda boleh mencapai ini menggunakan PHP dan AJAX:

Konfigurasi PHP:

• Buat skrip PHP (mis., data.php) yang bersambung ke anda pangkalan data dan mendapatkan semula data berdasarkan id parameter.

Penanda HTML:

• Buat elemen DIV dengan pengecam (cth., myStyle) .
• Tambah pautan dengan pengendali onClick yang memanggil fungsi JavaScript dengan id sebagai hujah.

JavaScript dengan jQuery:

• Sertakan pustaka jQuery.
• Tentukan fungsi recp yang menggunakan AJAX untuk memuatkan data daripada data.php ke dalam DIV myStyle.

Kod Contoh:

HTML:

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

<a href="#" onClick="recp('1')">One</a>
<a href="#" onClick="recp('2')">Two</a>
<a href="#" onClick="recp('3')">Three</a>

<div id='myStyle'>
</div></code>

PHP:

<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>

Setelah anda melaksanakan penyelesaian ini, klik pada pautan akan mengemas kini kandungan DIV myStyle tanpa memuatkan semula halaman.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengubah Kandungan Halaman HTML Secara Dinamik Tanpa Menyegarkan Halaman Menggunakan AJAX?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!