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

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

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

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

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

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

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

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

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();
?>

✅ 关键改进：

php中级教程之ajax技术

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。它不是新的编程语言，而是一种使用现有标准的新方法，最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容，不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。《php中级教程之ajax技术》带你快速

下载

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

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

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

  

    
      Live Balance : 

      — / 
      —
    
  

⚠️ 注意：

内嵌

作为纯文本容器虽可行，但语义化更佳的做法是使用 ，并避免将交互逻辑耦合进 标签。

? 总结与最佳实践清单

项目	推荐做法
参数传递	前端用 URLSearchParams 提取，后端用 filter_input() 验证
AJAX 触发	$(document).ready() 初始化 + setInterval() 定时轮询
SQL 安全	必须使用预处理语句，禁用字符串拼接查询
错误处理	前端监听 error 回调，后端返回明确状态码与提示
性能优化	设置 timeout、关闭 cache，生产环境可加节流（throttle）防高频请求
扩展性	后续可升级为单个接口返回 JSON，前端统一渲染多字段

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