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

在不刷新的情况下更新 HTML 页面内容

要动态更新网页内容而不重新加载，AJAX（异步 JavaScript 和 XML）是受雇。本文介绍了如何使用 PHP、jQuery 和 JavaScript 来实现此目的。

方法

由于 onclick 处理程序在客户端执行，因此直接调用 PHP 函数是不可行的。相反，利用 AJAX 的 JavaScript 函数用于调用 PHP 脚本并检索所需的数据。

实现

1. 创建 jQuery 函数：

<code class="javascript">function recp(id) {
  $('#myStyle').load('data.php?id=' + id);
}</code>

2. 单独的 PHP 脚本 (data.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>

3. HTML 集成:

<code class="html"><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>

工作原理

• 单击链接时，将调用 recp() 函数，该函数使用.load() 以 id 作为参数获取 data.php 的内容。
• data.php 执行必要的数据库查询并返回给定 id 的 para 值。
• jQuery 更新#myStyle 元素的内容与返回值，有效更新页面而不刷新。

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