本文介绍如何在页面加载时自动通过 AJAX 获取 URL 中的 GET 参数（如 locationID），向后端 PHP 脚本请求 MySQL 数据，并将结果动态渲染到指定 DOM 元素中；同时支持定时轮询实现无刷新实时更新。
在 Web 开发中，实现“页面不刷新即展示数据库数据”是常见需求。你当前的逻辑已基本正确：Page 2 通过 $_GET['location'] 获取参数，Page 3（livedata_totalbalance.php）执行查询并返回结果，前端用 jQuery AJAX 加载——但存在几个关键问题需优化：
✅ 正确做法：初始化加载 + 可选定时刷新
你当前使用 $(document).ready() 是正确的（确保 DOM 就绪后发起首次请求），但若需自动持续更新，不应使用 for/while 循环（会阻塞主线程），而应使用 setInterval() 实现稳定轮询：
<script type="text/javascript">
$(document).ready(function() {
const locationID = <?php echo json_encode($locationID); ?>; // ✅ 安全输出 PHP 变量（防 XSS 和语法错误）
// 首次加载（页面就绪时立即执行）
fetchLiveBalance(locationID);
// 每 2 秒自动刷新一次（可按需调整，如 5000 = 5秒）
setInterval(() => {
fetchLiveBalance(locationID);
}, 2000);
});
function fetchLiveBalance(id) {
$.ajax({
url: "livedata_totalbalance.php",
type: "GET",
data: { locationID: id }, // ✅ 推荐用 data 对象传参，比拼接 URL 更安全、清晰
dataType: "html",
cache: false, // ✅ false 即禁用缓存（注意：字符串 "false" 无效，应为布尔值 false）
success: function(data) {
$('#live_totalbalance').html(data);
},
error: function(xhr, status, error) {
console.error("AJAX 请求失败:", status, error);
$('#live_totalbalance').html("加载失败");
}
});
}
</script>⚠️ 后端 PHP 安全增强（livedata_totalbalance.php）
你当前代码存在严重 SQL 注入风险（直接拼接 $locationID）。必须使用预处理语句：
<?php
include "database.php";
// ✅ 强制转为整型（假设 locationID 是数字 ID）
$locationID = (int)($_GET['locationID'] ?? 0);
if ($locationID <= 0) {
die('Invalid location ID');
}
// ✅ 使用预处理防止 SQL 注入
$stmt = $conn->prepare("SELECT event_data FROM event_list WHERE event_id = ?");
$stmt->bind_param("i", $locationID);
$stmt->execute();
$result = $stmt->get_result();
if ($row = $result->fetch_assoc()) {
echo htmlspecialchars($row['event_data'], ENT_QUOTES, 'UTF-8'); // ✅ 输出前转义 HTML 特殊字符
} else {
echo "0"; // 或空字符串，避免前端显示 null
}
?>? 补充建议与注意事项
- 避免重复请求：setInterval 启动前可加节流判断（如上一次请求未完成则跳过本次），防止网络延迟导致请求堆积；
- 用户体验优化：可在 #live_totalbalance 内添加加载状态（如 <span class="loading">...</span>），并在 success/error 中切换；
- 跨域与路径检查：确保 livedata_totalbalance.php 与 Page 2 同源，且路径正确（推荐使用相对路径或 <?php echo $_SERVER['PHP_SELF']; ?> 动态生成）；
- 服务端性能：高频轮询会给数据库带来压力，生产环境建议结合 WebSocket 或长轮询（Long Polling），或改用事件驱动更新（如数据库变更通知）。
通过以上改进，你的页面将在加载时立即显示数据，并以设定间隔自动刷新，真正实现无感、安全、稳定的实时数据展示。
