如何使用 AJAX 動態更新網頁內容而不需要重新載入？

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">&lt;a href="#" onClick="recp('1')" &amp;gt; One   &amp;lt;/a&amp;gt;
   &lt;a href="#" onClick="recp('2')" &amp;gt; Two   &amp;lt;/a&amp;gt;
   &lt;a href="#" onClick="recp('3')" &amp;gt; Three &amp;lt;/a&amp;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) &amp;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">&lt;div id='myStyle'&amp;gt;
   &amp;lt;/div&amp;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.

以上是如何使用 AJAX 動態更新網頁內容而不需要重新載入？的詳細內容。更多資訊請關注PHP中文網其他相關文章！