如何在不重新加载页面的情况下动态更新HTML页面内容？

动态更改 HTML 页面内容

更新网页内容而不重新加载页面可以增强用户体验并提高网站性能。为此，您可以将 AJAX（异步 JavaScript 和 XML）与 HTML、PHP、JavaScript 和 jQuery 结合使用。

考虑以下示例：

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

<div>

此代码显示链接从数据库中检索不同的内容。您不需要在单击链接时重新加载页面，而是需要使用 AJAX 异步获取数据并更新“myStyle”div 的内容，而无需刷新页面。

要实现此目的，您可以使用以下 JavaScript 函数：

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

此函数使用 jQuery 的 load() 方法从单独的 PHP 脚本（“data.php”）获取内容并替换“myStyle”div 的内容以及检索到的数据。

PHP 脚本（“data.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'];
}

通过实施这种方法，您可以动态更新页面内容，而无需重新加载页面，从而允许用户无缝导航您的网站，同时按需访问不同的内容。

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