如何在 PHP 数据查询期间优雅显示加载动画-js教程-PHP中文网

如何在 PHP 数据查询期间优雅显示加载动画

本文介绍一种基于原生 javascript ajax 的无刷新加载屏实现方案，通过异步请求分离前端交互与后端数据库操作，在不跳转页面的前提下实时控制加载状态，提升用户体验。

本文介绍一种基于原生 javascript ajax 的无刷新加载屏实现方案，通过异步请求分离前端交互与后端数据库操作，在不跳转页面的前提下实时控制加载状态，提升用户体验。

在 Web 应用中，当 PHP 执行耗时数据库查询（如复杂报表生成、大数据量检索）时，若直接同步渲染，用户将面临长达数秒的“白屏卡顿”，极易引发误操作或流失。你尝试的 <script> 内联隐藏加载元素的方式之所以失败，根本原因在于：<strong>PHP 是服务端同步执行语言，整个页面必须等待 query() 完成后才向浏览器输出 HTML 和 JS，因此前端 DOM 无法在查询进行中被动态干预。</script>

正确的解法是采用 前后端解耦的异步通信模式：前端先展示加载层，再通过 AJAX 发起独立请求；后端专注处理数据并返回结果；前端根据响应决定移除加载层或提示错误。

✅ 推荐实现步骤（原生 JavaScript + PHP）

1. 前端：添加加载遮罩并发起异步请求

在 HTML 中定义一个全屏加载层（建议使用语义化、可访问的结构）：

<div id="loading-screen" style="
  display: none;
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  z-index: 9999;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
">
  <div class="spinner" style="
    width: 48px; height: 48px;
    border: 4px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s linear infinite;
  "></div>
  <p style="margin-top: 16px; font-size: 16px;">正在加载数据…</p>
</div>

<style>
@keyframes spin {
  to { transform: rotate(360deg); }
}
</style>

然后使用现代 fetch() API（更简洁、Promise 友好，兼容性优于传统 XMLHttpRequest）触发查询：

<button id="load-data-btn">加载报表数据</button>

<script>
document.getElementById('load-data-btn').addEventListener('click', async () => {
  const loading = document.getElementById('loading-screen');
  loading.style.display = 'flex'; // 显示加载层

  try {
    const response = await fetch('fetch_data.php', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ action: 'generate_report' })
    });

    if (!response.ok) throw new Error(`HTTP ${response.status}`);

    const result = await response.json();

    if (result.success) {
      // ✅ 查询成功：更新页面内容（例如插入表格）
      document.body.insertAdjacentHTML('beforeend', 
        `<div class="report-result"><h3>查询结果：<pre class="brush:php;toolbar:false;">${JSON.stringify(result.data, null, 2)}</script>

` ); } else { // ❌ 业务逻辑失败（如 SQL 错误、权限不足） alert(`操作失败：${result.message || '未知错误'}`); } } catch (err) { console.error('请求异常:', err); alert('网络请求失败，请检查连接或稍后重试。'); } finally { loading.style.display = 'none'; // 无论成功失败，均关闭加载层 } });

2. 后端：fetch_data.php —— 纯数据接口（无 HTML 输出）

<?php header('Content-Type: application/json; charset=utf-8');
header('Access-Control-Allow-Origin: *'); // 开发阶段可加，生产环境请限制域名
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Allow-Headers: Content-Type');

// 防止直接访问
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
    http_response_code(405);
    echo json_encode(['success' => false, 'message' => '仅支持 POST 请求']);
    exit;
}

// 解析请求体
$input = file_get_contents('php://input');
$data = json_decode($input, true);

// ✅ 关键：此处执行真实 DB 查询（示例使用 PDO）
try {
    $pdo = new PDO('mysql:host=localhost;dbname=test', 'user', 'pass');
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    $stmt = $pdo->prepare("SELECT * FROM large_table WHERE created_at > DATE_SUB(NOW(), INTERVAL 7 DAY) LIMIT 100");
    $stmt->execute();
    $rows = $stmt->fetchAll(PDO::FETCH_ASSOC);

    // 返回结构化 JSON
    echo json_encode([
        'success' => true,
        'data' => $rows,
        'count' => count($rows)
    ]);

} catch (PDOException $e) {
    error_log('DB Query Failed: ' . $e->getMessage());
    http_response_code(500);
    echo json_encode([
        'success' => false,
        'message' => '数据库查询异常，请联系管理员'
    ]);
}
?>