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

在不刷新的情況下更新HTML 頁面內容

要動態更新網頁內容而不重新加載，AJAX（異步JavaScript 和XML ）是受僱。本文介紹如何使用 PHP、jQuery 和 JavaScript 來實現此目的。

方法

由於 onclick 處理程序在客戶端執行，因此直接呼叫 PHP 函數是不可行的。相反，利用 AJAX 的 JavaScript 函數用於呼叫 PHP 腳本並檢索所需的資料。

實作

1. 建立jQuery 函數：

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

<code class="html"><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>

單獨的PHP 腳本(data.php):

HTML 整合:工作原理點擊連結時，將呼叫recp() 函數，函數使用.load() 以id 作為參數來取得data.php 的內容。 data.php 執行必要的資料庫查詢並傳回給定 id 的 para 值。 jQuery 更新#myStyle 元素的內容與回傳值，有效更新頁面而不刷新。

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