如何在不刷新页面的情况下使用 AJAX 动态更新 Div 的内容？

HTML - 动态更改页面内容而不刷新

挑战：

您已检索到数据来自数据库并显示在 div 中。单击链接时，您希望更新 div 的内容而不刷新页面。

解决方案：

利用 AJAX，您可以绕过页面刷新并更新 div 的内容内容无缝。其工作原理如下：

客户端（HTML 和 JavaScript）：

• 使用调用 JavaScript 函数的事件处理程序创建链接。
• 在这些 JavaScript 函数中，使用 jQuery 的 load() 方法将请求发送到带有参数的 PHP 脚本（例如， $('#myStyle').load('data.php?id=' id);).

服务器端 (PHP):

• 创建一个单独的 PHP 文件来处理 AJAX 请求。
• 使用收到的参数从数据库中获取数据来自 AJAX 请求。
• 将更新的内容返回到浏览器。

示例：

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

<div>

function recp(id) {
  $('#myStyle').load('data.php?id=' + id);
}

// In data.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'];
}

通过以下步骤，您可以动态更新div的内容，而不会导致整个页面刷新，让您的网站更加反应灵敏且用户友好。

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