如何在不刷新页面的情况下动态加载并实时更新 MySQL 数据

本文介绍如何利用 ajax 在页面加载时自动获取 url 参数中的数据（如 locationid），并通过异步请求从 mysql 数据库中拉取对应内容，实现无刷新展示与定时刷新功能。

在 Web 开发中，常需在不刷新页面的前提下，根据 URL 中的 GET 参数（例如 ?location=3）动态加载数据库数据，并实时更新界面。你当前的代码已基本具备这一能力，但存在几个关键优化点：首次加载时机、SQL 注入风险、定时刷新机制缺失、以及错误处理不足。下面我们将以专业教程的方式，系统性地重构方案。

✅ 正确的初始化加载逻辑（页面加载即触发）

你已在 $(document).ready() 中调用 AJAX，这是正确的起点。但为确保 $locationID 安全可靠地传递，建议使用更健壮的方式获取 URL 参数，而非直接拼接 PHP 变量（尤其当页面被缓存或重定向时可能失效）：

<script type="text/javascript">
$(document).ready(function() {
    // 从当前 URL 安全提取 locationID
    const urlParams = new URLSearchParams(window.location.search);
    const locationID = urlParams.get('location');

    if (!locationID) {
        $('#live_totalbalance').html('—');
        console.warn('Missing "location" parameter in URL');
        return;
    }

    function fetchLiveBalance() {
        $.ajax({
            url: 'livedata_totalbalance.php',
            type: 'GET',
            data: { locationID: locationID }, // 推荐使用 data 对象，更安全清晰
            dataType: 'html',
            cache: false,
            timeout: 5000,
            success: function(data) {
                $('#live_totalbalance').html(data || '—');
            },
            error: function(xhr, status, error) {
                console.error('AJAX Error:', status, error);
                $('#live_totalbalance').html('Error loading data');
            }
        });
    }

    // 页面加载后立即执行一次
    fetchLiveBalance();

    // ✅ 每 2 秒自动刷新一次（可按需调整）
    setInterval(fetchLiveBalance, 2000);
});
</script>

? 为什么用 setInterval 而非 setTimeout？setTimeout 仅执行一次；而 setInterval 可持续轮询，真正实现“实时更新”。若需控制启停（如用户切换标签页时暂停），可结合 Page Visibility API 进一步优化。

? 后端安全加固（livedata_totalbalance.php）

你当前的 PHP 脚本存在严重 SQL 注入风险（直接拼接 $locationID）。必须改用预处理语句（Prepared Statements），同时验证输入类型：

<?php
require_once "database.php"; // 确保使用 mysqli 或 PDO

// 1. 验证并过滤输入
$locationID = filter_input(INPUT_GET, 'locationID', FILTER_SANITIZE_NUMBER_INT);
if (!$locationID || !is_numeric($locationID)) {
    http_response_code(400);
    echo 'Invalid location ID';
    exit;
}

// 2. 使用预处理防止 SQL 注入
$stmt = $conn->prepare("SELECT event_data FROM event_list WHERE event_id = ?");
$stmt->bind_param('i', $locationID); // 'i' 表示整型
$stmt->execute();
$result = $stmt->get_result();

if ($row = $result->fetch_assoc()) {
    echo htmlspecialchars($row['event_data'], ENT_QUOTES, 'UTF-8');
} else {
    echo '—';
}
$stmt->close();
?>

✅ 关键改进：

Chromox

Chromox是一款领先的AI在线生成平台，专为喜欢AI生成技术的爱好者制作的多种图像、视频生成方式的内容型工具平台。

下载

• 使用 filter_input() 过滤非法字符；
• 使用 mysqli::prepare() + bind_param() 彻底杜绝注入；
• htmlspecialchars() 防止 XSS 输出；
• 添加 HTTP 状态码与空结果兜底。

? 前端结构补充建议（增强可维护性）

为便于后续扩展（如同时更新多个字段），推荐将多个数据源统一管理：

<div class="row">
  <div class="form-group col">
    <label class="form-control form-control-lg text-8 text-center">
      Live Balance : <br>
      <span id="live_totalbalance">—</span> / 
      <span id="live_totalpreset">—</span>
    </label>
  </div>
</div>

⚠️ 注意：<div> 内嵌 <div> 作为纯文本容器虽可行，但语义化更佳的做法是使用 <span>，并避免将交互逻辑耦合进 <label> 标签。

? 总结与最佳实践清单

通过以上改造，你的页面将在加载瞬间显示初始数据，并每 2 秒自动同步最新状态——全程无刷新、安全可靠、易于维护。