如何使用 AJAX 动态更新 Div 的内容而不重新加载页面？

动态更新页面内容

此代码旨在在单击链接时动态更新 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 脚本

<?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'];
}
?>

在此设置中，单击任何链接都会触发 recp JavaScript 函数，它使用 jQuery 的 .load() 方法通过 AJAX 从 data.php 脚本检索数据。然后，数据会加载到 #myStyle div 中，动态更新其内容，而无需刷新页面。

以上是如何使用 AJAX 动态更新 Div 的内容而不重新加载页面？的详细内容。更多信息请关注PHP中文网其他相关文章！