求助：用Ajax/jQuery每5秒刷新MySQL查询结果至Div无显示

首先你已经确认Ajax能触发（echo测试文本能显示），那问题大概率出在MySQL查询的执行/输出或者前端接收内容的逻辑上，咱挨个排查：

第一步：先把screen.php的MySQL部分捋顺 #

既然Ajax请求能通，那先确保screen.php本身能正确输出查询结果：

1. 检查数据库连接是否正常
   别光写连接代码，加个错误判断，避免连接失败还不知道：

   $conn = mysqli_connect("localhost", "你的用户名", "你的密码", "你的数据库名");
   if (!$conn) {
       die("数据库连接炸了: " . mysqli_connect_error());
   }
   

2. 验证查询语句和结果
   可以临时把SQL语句打印出来，看看有没有语法错误，再判断结果集是否有数据：

   $sql = "SELECT * FROM 你的表名";
   // 临时测试：打印SQL语句，确认字段/表名没写错
   // echo "SQL: " . $sql; 
   $result = mysqli_query($conn, $sql);
   
   if (mysqli_num_rows($result) > 0) {
       // 有数据就循环输出，比如用列表或者自定义格式
       while($row = mysqli_fetch_assoc($result)) {
           echo "ID: " . $row["id"]. " | 内容: " . $row["content"]. "<br>";
       }
   } else {
       echo "暂时没查到数据哦";
   }
   // 别忘了关连接
   mysqli_close($conn);
   

3. 注意多余输出！
   检查screen.php的<?php标签前面有没有空格、换行，这些空白会被当作返回内容的一部分，可能导致显示异常。

第二步：前端Ajax代码要写对 #

你需要每5秒刷新，用setInterval就可以，但要注意几个细节：

1. 先确保引入了jQuery
   在index.php的<head>里加这句：

   <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
   

2. 写定时刷新的逻辑
   假设你要把结果填充到index.php里的#refreshDiv容器（如果是screen.php自己的容器，逻辑一样）：

   $(document).ready(function() {
       // 定义刷新函数
       function loadMySQLData() {
           $.ajax({
               url: 'screen.php?t=' + new Date().getTime(), // 加时间戳避免浏览器缓存
               type: 'GET',
               success: function(data) {
                   // 把返回的内容塞进目标div
                   $('#refreshDiv').html(data);
               },
               error: function(xhr, status, err) {
                   // 调试用，控制台看错误信息
                   console.log("请求出错了: " + status + " - " + err);
                   $('#refreshDiv').html("加载失败...");
               }
           });
       }
       // 页面加载时先执行一次，不用等5秒
       loadMySQLData();
       // 每5秒刷新一次
       setInterval(loadMySQLData, 5000);
   });
   

常见的坑点要避开 #

• 缓存问题：浏览器会缓存GET请求的结果，所以加个时间戳?t=new Date().getTime()就能解决
• 编码问题：如果查询结果有中文乱码，在数据库连接后加一句mysqli_set_charset($conn, "utf8");
• 容器ID错误：确认前端要填充的div的ID和代码里的#refreshDiv一致，别打错字！

给你个完整的小例子参考 #

index.php（前端页面） #

<!DOCTYPE html>
<html>
<head>
    <title>MySQL数据自动刷新</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
    <h3>实时刷新的MySQL数据</h3>
    <div id="dataContainer">正在加载...</div>

    <script>
        $(document).ready(function() {
            function loadData() {
                $.ajax({
                    url: 'screen.php?t=' + new Date().getTime(),
                    type: 'GET',
                    success: function(res) {
                        $('#dataContainer').html(res);
                    },
                    error: function() {
                        $('#dataContainer').html("加载失败，请检查连接");
                    }
                });
            }
            loadData();
            setInterval(loadData, 5000);
        });
    </script>
</body>
</html>

screen.php（数据查询接口） #

<?php
$conn = mysqli_connect("localhost", "root", "123456", "test_db");
if (!$conn) {
    die("连接失败: " . mysqli_connect_error());
}
mysqli_set_charset($conn, "utf8");

$sql = "SELECT * FROM user_list";
$result = mysqli_query($conn, $sql);

if (mysqli_num_rows($result) > 0) {
    echo "<ul>";
    while($row = mysqli_fetch_assoc($result)) {
        echo "<li>用户名: " . $row["username"] . " | 邮箱: " . $row["email"] . "</li>";
    }
    echo "</ul>";
} else {
    echo "暂无用户数据";
}

mysqli_close($conn);
?>

内容的提问来源于stack exchange，提问作者Dustin