本文介绍如何利用 ajax 在页面加载时自动获取 url 中的 get 参数（如 locationid），动态查询 mysql 数据库并将结果插入 html 元素，同时支持定时轮询实现无刷新实时更新。
在 Web 开发中，常需根据上一页传递的 GET 参数（例如 ?location=3）在当前页（Page 2）首次加载时即展示对应数据库数据，且后续无需手动点击按钮即可自动刷新——这正是典型的「无刷新动态加载 + 定时轮询」场景。核心在于：服务端正确接收参数、前端精准发起请求、DOM 实时响应渲染。
✅ 正确实现步骤
1. 页面加载时立即执行 AJAX（非仅靠 $(document).ready() 触发）
你当前的代码已使用 $(document).ready()，这是正确的起点。但需确保 PHP 变量 $locationID 在 JS 中被安全输出。建议增强健壮性：
? 关键改进点：使用 json_encode() 防止 XSS 和语法错误（如 $locationID 为空或含特殊字符）；将 data 作为对象传入，避免 URL 拼接风险；添加 error 回调便于调试；setInterval 替代 setTimeout 实现持续轮询（setTimeout 仅执行一次）。
2. 后端脚本（livedata_totalbalance.php）安全加固
你当前的 SQL 存在严重 SQL 注入漏洞（直接拼接 $_GET['locationID']）。必须使用预处理语句：
Invalid location';
exit;
}
// ✅ 使用预处理防止注入
$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');
} else {
echo 'No data found';
}
?>⚠️ 严禁再使用 mysqli_fetch_array() + 直接拼接 SQL！
filter_input() + prepare() + bind_param() 是 PHP 原生 MySQLi 的标准防护方案。
3. HTML 结构优化（增强可维护性）
为提升语义化与样式控制，建议给动态区域添加明确类名和占位提示：
✅ 最佳实践总结
| 环节 | 推荐做法 |
|---|---|
| 参数传递 | 前端用 data: {key: value}，后端用 filter_input() + 类型校验 |
| SQL 安全 | 必须使用预处理语句（prepare/bind_param），禁用字符串拼接 |
| AJAX 轮询 | setInterval() 实现周期更新；首次加载放在 $(document).ready() 内 |
| 错误处理 | 前端加 error 回调，后端对非法请求返回 400 并友好提示 |
| XSS 防护 | 输出前用 htmlspecialchars() 编码用户数据 |
通过以上改造，你的页面将在加载瞬间显示 location=3 对应的数据，并每 2 秒自动同步最新状态，全程无刷新、安全可靠、易于维护。
