如何在不刷新页面的情况下通过 GET 参数自动加载并实时更新 MySQL 数据

本文介绍如何利用 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 结构优化（增强可维护性）

为提升语义化与样式控制，建议给动态区域添加明确类名和占位提示：

    
        
            Live Balance : 

            —
            /
            —
        
    

✅ 最佳实践总结

环节	推荐做法
参数传递	前端用 data: {key: value}，后端用 filter_input() + 类型校验
SQL 安全	必须使用预处理语句（prepare/bind_param），禁用字符串拼接
AJAX 轮询	setInterval() 实现周期更新；首次加载放在 $(document).ready() 内
错误处理	前端加 error 回调，后端对非法请求返回 400 并友好提示
XSS 防护	输出前用 htmlspecialchars() 编码用户数据

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