首頁  >  文章  >  資料庫  >  如何使用 AJAX 動態更新 Div 的內容而不重新載入頁面?

如何使用 AJAX 動態更新 Div 的內容而不重新載入頁面?

Susan Sarandon
Susan Sarandon原創
2024-11-25 07:43:111008瀏覽

How Can I Dynamically Update a Div's Content Using AJAX without Page Reloads?

動態更新頁面內容

此程式碼旨在點擊連結時動態更新 div 元素的內容,而無需重新載入頁面。

PHP 產生的頁面

<?php
$id = '1';

function recp($rId) {
    $id = $rId;
}
?>

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

<div>

JavaScript 增強版

<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>
<><的PHP 腳本

在此設定中,點擊任何連結都會觸發 recp JavaScript 函數,它使用 jQuery 的 .load() 方法透過 AJAX 從 data.php 腳本檢索資料。然後,資料會載入到 #myStyle div 中,動態更新其內容,而無需刷新頁面。
<?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'];
}
?>

以上是如何使用 AJAX 動態更新 Div 的內容而不重新載入頁面?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn