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

Change HTML Page Contents Dynamically Without Reloading

You desire to update the contents of a webpage dynamically, specifically a div, without triggering a page refresh. This can be achieved through AJAX (Asynchronous JavaScript and XML).

jQuery Approach

1. Define JavaScript Function:

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

2. Add Event Handlers:
   Replace the onClick handlers in your HTML with the recp function:

   <code class="html"><a href="#" onClick="recp('1')" &gt; One   &lt;/a&gt;
   <a href="#" onClick="recp('2')" &gt; Two   &lt;/a&gt;
   <a href="#" onClick="recp('3')" &gt; Three &lt;/a&gt;</code>

3. Create PHP Script:
   Create a separate PHP file, such as data.php, that handles the data retrieval:

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

4. Load Data Dynamically:
   When a link is clicked, the recp function uses AJAX to load the data from data.php into the div with the id 'myStyle':

   <code class="html"><div id='myStyle'&gt;
   &lt;/div&gt;</code>

Note: Ensure that the path to data.php in the jQuery load() function is correct and that the PHP file has appropriate permissions.

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