如何使用 AJAX 动态更改 HTML 页面内容而不刷新页面？

使用 AJAX 更改 HTML 页面内容而不重新加载

您希望在链接打开时更新 DIV 元素的内容而不刷新页面点击。以下是使用 PHP 和 AJAX 实现此目的的方法：

PHP 配置：

• 创建一个连接到您的 PHP 脚本（例如 data.php）数据库并根据参数 id 检索数据。

HTML 标记：

• 创建带有标识符的 DIV 元素（例如 myStyle） .
• 使用 onClick 处理程序添加链接，该处理程序以 id 作为参数调用 JavaScript 函数。

使用 jQuery 的 JavaScript:

• 包含 jQuery 库。
• 定义一个 recp 函数，使用 AJAX 将 data.php 中的数据加载到 myStyle DIV 中。

示例代码：

HTML:

<code class="html"><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 id='myStyle'>
</div></code>

PHP:

<code class="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'];
  }
?></code>

实施此解决方案后，单击这些链接将更新 myStyle DIV 的内容，而无需重新加载页面。

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