
動態更新頁面內容
此程式碼旨在點擊連結時動態更新 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中文網其他相關文章!