如何在不重新載入頁面的情況下動態更新HTML頁面內容？

動態變更 HTML 頁面內容

更新網頁內容而不重新載入頁面可以增強使用者體驗並提高網站效能。為此，您可以將 AJAX（非同步 JavaScript 和 XML）與 HTML、PHP、JavaScript 和 jQuery 結合使用。

考慮以下範例：

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

<div>

此程式碼顯示連結會從資料庫擷取不同的內容。您不需要在點擊連結時重新載入頁面，而是需要使用 AJAX 非同步取得資料並更新「myStyle」div 的內容，而無需刷新頁面。

要實現此目的，您可以使用以下JavaScript 函數：

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

此函數使用jQuery 的load() 方法從單獨的PHP 腳本（「data.php」）取得內容並取代「myStyle」div 的內容以及檢索到的資料。

PHP 腳本（「data.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'];
}

透過實作此方法，您可以動態更新頁面內容，而無需重新載入頁面，從而允許使用者無縫導航您的網站，同時按需存取不同的內容。

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