PHP执行数据库查询时实现非跳转式加载屏的方法

原代码无效的核心原因是PHP是服务端同步执行：服务器会先完成数据库查询，再把包含加载div和隐藏脚本的整个页面一次性返回给浏览器，所以加载屏根本没机会显示就被隐藏了。

以下是两种无需跳转页面的可行方案：

方案一：前端异步请求（推荐） #

通过AJAX异步触发数据库查询，让加载屏在前端独立控制显示/隐藏：

• 页面初始渲染加载屏
• 页面加载完成后发起异步请求执行查询
• 查询完成后隐藏加载屏并展示结果

代码示例 #

HTML结构：

<div id='loading' style="display: block; padding: 20px; background: #f5f5f5;">加载中...</div>
<div id='content' style="display: none;"></div>

原生JavaScript逻辑：

window.addEventListener('load', function() {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'fetch-data.php', true);
    
    xhr.onload = function() {
        if (this.status === 200) {
            document.getElementById('loading').style.display = 'none';
            document.getElementById('content').innerHTML = this.responseText;
            document.getElementById('content').style.display = 'block';
        }
    };
    
    xhr.send();
});

PHP接口文件（fetch-data.php）：

<?php
// 数据库连接逻辑
$db = new mysqli('localhost', '用户名', '密码', '数据库名');
// 执行查询
$result = $db->query("SELECT * FROM your_table");
// 输出处理后的结果
if ($result) {
    while ($row = $result->fetch_assoc()) {
        echo "<p>" . htmlspecialchars($row['目标字段']) . "</p>";
    }
}
?>

方案二：服务端分块输出 #

利用PHP的缓冲区控制，分阶段向浏览器输出内容，先显示加载屏，再执行查询，最后隐藏加载屏：

<?php
// 禁用默认输出缓冲
ob_end_flush();
?>

<div id='loading' style="padding: 20px; background: #f5f5f5;">加载中...</div>
<?php
// 强制将当前内容输出到浏览器
flush();
ob_flush();

// 执行耗时的数据库查询
$result = $db->query("SELECT * FROM your_table");

// 查询完成后隐藏加载屏
echo "<script>document.getElementById('loading').style.display = 'none';</script>";

// 输出查询结果
if ($result) {
    while ($row = $result->fetch_assoc()) {
        echo "<p>" . htmlspecialchars($row['目标字段']) . "</p>";
    }
}
?>

注意事项 #

• 分块输出可能受服务器配置限制：比如Nginx需关闭fastcgi_buffering，Apache需禁用output_buffering
• 部分浏览器会缓冲内容直到达到一定字节数，可在加载屏前输出若干空白字符触发显示

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