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

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

Susan Sarandon
發布: 2024-11-25 07:43:11
原創
1165 人瀏覽過

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

動態更新頁面內容

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

PHP 產生的頁面

1

2

3

4

5

6

7

8

9

10

11

12

13

<?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 增強版

1

2

3

4

5

6

7

8

9

10

11

<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 中,動態更新其內容,而無需刷新頁面。

1

2

3

4

5

6

7

8

9

10

<?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
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板