如何在不刷新頁面的情況下使用 AJAX 動態更新 Div 的內容？-mysql教程-PHP中文網

如何在不刷新頁面的情況下使用 AJAX 動態更新 Div 的內容？

Mary-Kate Olsen

發布： 2024-11-24 14:33:53

原創

731 人瀏覽過

How Can I Dynamically Update a Div's Content with AJAX Without Page Refresh?

HTML - 動態變更頁面內容而不刷新

挑戰：

挑戰：

您已檢索到數據來自資料庫並顯示在div 中。當您點擊連結時，您希望更新 div 的內容而不刷新頁面。

解決方案：

利用 AJAX，您可以繞過頁面刷新並更新 div 的內容內容無縫。其運作原理如下：

客戶端（HTML 和 JavaScript）：

使用呼叫 JavaScript 函數的事件處理程序建立連結。

在這些JavaScript 函數中，使用jQuery 的load() 方法將請求傳送到帶有參數的PHP 腳本（例如， $('#myStyle').load('data.php?id=' id);).

伺服器端(PHP):
建立一個單獨的 PHP 檔案來處理 AJAX 請求。

使用收到的參數從資料庫中取得資料來自 AJAX 請求。

將更新的內容送回瀏覽器。

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

<div>

登入後複製

function recp(id) {
  $('#myStyle').load('data.php?id=' + id);
}

登入後複製

範例：

// In data.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'];
}

登入後複製

透過以下步驟，您可以動態更新div的內容，而不會導致整個頁面刷新，讓您的網站更反應靈敏且用戶友好。

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