如何使用 AJAX 更新動態內容而不刷新頁面？

Dynamic Content Updates with AJAX

Problem:

You aim to update the content of a div without reloading the page upon clicking a link.

Solution without Refreshing:

Employing AJAX (Asynchronous JavaScript and XML), you can retrieve updated content without reloading the page.

Implementation:

1. Handle Link Events with JavaScript:

   Assign JavaScript event handlers to links to invoke the data retrieval function.

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

2. AJAX Request with jQuery:

   The recp() function uses jQuery's .load() method to retrieve data from a PHP script without reloading the page.

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

3. Retrieve Data with PHP:

   Create a PHP script (e.g., data.php) that retrieves data based on the ID passed in the 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>

4. Render Updated Content:

   The retrieved data is loaded into the div with id='myStyle'.

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

With this implementation, clicking links updates the div's content dynamically, providing a seamless and responsive user experience without refreshing the page.

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