Bagaimana untuk Mengemas kini Kandungan Halaman Web Secara Dinamik tanpa Muat Semula Halaman Menggunakan AJAX?

Mengemas kini Kandungan Halaman HTML tanpa Menyegarkan

Untuk mengemas kini kandungan halaman web secara dinamik tanpa memuatkannya semula, AJAX (Asynchronous JavaScript and XML) ialah bekerja. Artikel ini menerangkan cara untuk mencapai ini menggunakan PHP, jQuery dan JavaScript.

Pendekatan

Memandangkan pengendali onclick melaksanakan bahagian klien, memanggil fungsi PHP secara langsung tidak boleh dilaksanakan. Sebaliknya, fungsi JavaScript yang menggunakan AJAX digunakan untuk menggunakan skrip PHP dan mendapatkan semula data yang dikehendaki.

Pelaksanaan

1. Buat Fungsi jQuery:

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

2. Asingkan Skrip PHP (data.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>

3. Pengintegrasian HTML :

<code class="html"><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>

Cara ia Berfungsi

• Apabila pautan diklik, fungsi recp() digunakan, yang menggunakan .load() untuk mengambil kandungan data.php dengan id sebagai parameter.
• data.php melaksanakan pertanyaan pangkalan data yang diperlukan dan mengembalikan nilai para untuk id yang diberikan.
• kemas kini jQuery kandungan elemen #myStyle dengan nilai yang dikembalikan, mengemas kini halaman dengan berkesan tanpa menyegarkan.

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