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

動態修改頁內容而不刷新

問題：

您想要在div 中顯示從資料庫擷取的資料並在點擊連結時更新div 的內容，而不刷新頁面。

解決方案：

要實現此目的，您可以使用AJAX（非同步JavaScript 和XML），它允許您向伺服器發出非同步請求，而無需重新載入頁面。實作方法如下：

1.建立 JavaScript 函數：

將 onclick 事件處理程序新增至觸發 JavaScript 函數的連結。此函數將使用 AJAX 向 PHP 腳本發出請求並檢索更新的資料。

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

2.新增AJAX 要求：

在JavaScript 函數中，使用jQuery $.load() 方法向包含取得資料的程式碼的PHP 腳本傳送AJAX 請求。

3.建立 PHP 腳本：

建立一個單獨的 PHP 檔案（例如 data.php）來處理 AJAX 請求。這個腳本應該：

1. 連接資料庫。
2. 根據請求中傳入的id參數擷取資料。
3. 將擷取的資料回傳給客戶端.

<code class="php"><?php
// Connect to database
require ('myConnect.php');

// Get the ID parameter
$id = $_GET['id'];

// Fetch data from database
$results = mysql_query("SELECT para FROM content WHERE para_ID='$id'");

// Check if data exists
if( mysql_num_rows($results) > 0 ) {
  $row = mysql_fetch_array( $results );
  echo $row['para'];
}
?></code>

4.更新Div 內容：

PHP 腳本的回應將顯示在ID 為“myStyle”的div 中。 div 的內容將動態更新，無需重新載入頁面。

附加說明：

• 您可能需要調整 AJAX 請求 URL 和資料庫連接JavaScript 和 PHP 腳本中的設定以符合您的特定環境。
• 您可以透過查閱線上資源或參加課程來了解有關 AJAX 的更多信息，以提高您對非同步程式設計的理解。

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