如何实现每隔数秒从数据库加载数据且无需刷新整个页面？

API 探路者

2026-10-2

问题根因及修复方案

现存问题

jQuery.load()方法使用错误：当前$('#test').load('#test')的写法会发起对当前页面的完整HTTP请求，拉取整页内容后再筛选#test节点替换，效率极低，如果公共引入的header.php包含自动刷新逻辑，就会触发整页刷新
定时时间配置错误：代码中设置的5000毫秒对应5秒，不符合你需要的10秒刷新要求
数据逻辑耦合：数据库查询逻辑和前端页面写在同一个文件，异步请求时会重复加载不需要的公共文件，冗余度高

修复步骤

1. 拆分独立数据接口

新建get_messages.php作为异步拉取消息的单独接口，代码如下：

<?php
include('includes/Connection.php');
include('includes/GeneralFunctions.php');

$l1 = $con->prepare("SELECT msg, topic FROM messages ORDER BY id DESC");
$l1->execute();
foreach($l1 as $r1)
{
    echo $r1['topic']."<br />";
    echo $r1['msg']."\n";
}
?>

2. 修改原页面代码

修正js逻辑，去掉冗余重复的查询代码：

<?php 
include('header.php');
?>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
setInterval(function(){
      // 仅请求数据接口更新指定区域
      $('#test').load('get_messages.php');
 },10000); // 10秒对应10000毫秒
</script>

<div id="test">
<?php
// 首次加载渲染初始数据，避免页面刚打开时区域空白
include('get_messages.php');
?>
</div>