如何使用 AJAX 動態變更 HTML 頁面內容而不重新整理頁面？

使用AJAX 更改HTML 頁面內容而不重新載入

您希望在連結開啟時更新DIV 元素的內容而不刷新頁面點擊。以下是使用PHP 和AJAX 來實現此目的的方法：

PHP 配置：

• 建立一個連接到您的PHP 腳本（例如data.php）資料庫並根據參數id 檢索資料。

HTML 標記：

• 建立帶有識別符的DIV 元素（例如myStyle） .
• 使用onClick 處理程序新增鏈接，該處理程序以id 作為參數呼叫JavaScript 函數。

使用 jQuery 的 JavaScript:

• 包含 jQuery 函式庫。
• 定義一個 recp 函數，使用 AJAX 將 data.php 中的資料載入到 myStyle DIV 中。

範例程式碼：

HTML:

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

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

<div id='myStyle'>
</div></code>

<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>

PHP:

實施此解決方案後，點擊這些連結將更新myStyle DIV 的內容，而無需重新載入頁面。

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