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

本文介绍如何利用 ajax 在页面加载时自动获取 url 中的 get 参数（如 locationid），动态查询 mysql 数据库并将结果插入 html 元素，同时支持定时轮询实现无刷新实时更新。

在 Web 开发中，常需根据上一页传递的 GET 参数（例如 ?location=3）在当前页（Page 2）首次加载时即展示对应数据库数据，且后续无需手动点击按钮即可自动刷新——这正是典型的「无刷新动态加载 + 定时轮询」场景。核心在于：服务端正确接收参数、前端精准发起请求、DOM 实时响应渲染。

✅ 正确实现步骤

1. 页面加载时立即执行 AJAX（非仅靠 $(document).ready() 触发）

你当前的代码已使用 $(document).ready()，这是正确的起点。但需确保 PHP 变量 $locationID 在 JS 中被安全输出。建议增强健壮性：

<script type="text/javascript">
$(document).ready(function() {
    const locationID = <?php echo json_encode($locationID ?: ''); ?>;

    if (!locationID) {
        console.warn('⚠️ Missing locationID from URL');
        return;
    }

    // 首次加载：立即获取数据
    fetchLiveData(locationID);

    // 后续自动刷新：每 2 秒轮询一次（可按需调整）
    setInterval(() => {
        fetchLiveData(locationID);
    }, 2000);
});

function fetchLiveData(id) {
    $.ajax({
        url: "livedata_totalbalance.php",
        type: "GET",
        data: { locationID: id }, // 推荐用 data 对象传参，更安全、易读
        dataType: "html",
        cache: false, // 建议用 false（布尔值），而非字符串 "false"
        success: function(data) {
            $('#live_totalbalance').html(data);
        },
        error: function(xhr, status, err) {
            console.error('AJAX Error:', status, err);
            $('#live_totalbalance').html('<span class="text-danger">—</span>');
        }
    });
}
</script>

? 关键改进点：使用 json_encode() 防止 XSS 和语法错误（如 $locationID 为空或含特殊字符）；将 data 作为对象传入，避免 URL 拼接风险；添加 error 回调便于调试；setInterval 替代 setTimeout 实现持续轮询（setTimeout 仅执行一次）。

2. 后端脚本（livedata_totalbalance.php）安全加固

你当前的 SQL 存在严重 SQL 注入漏洞（直接拼接 $_GET['locationID']）。必须使用预处理语句：

<?php
include "database.php";

// 严格过滤与验证
$locationID = filter_input(INPUT_GET, 'locationID', FILTER_SANITIZE_NUMBER_INT);
if (!$locationID || $locationID <= 0) {
    http_response_code(400);
    echo '<span class="text-muted">Invalid location</span>';
    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 '<span class="text-muted">No data found</span>';
}
?>

⚠️ 严禁再使用 mysqli_fetch_array() + 直接拼接 SQL！
filter_input() + prepare() + bind_param() 是 PHP 原生 MySQLi 的标准防护方案。

Tago AI

AI生成带货视频，专为电商卖货而生

下载

3. HTML 结构优化（增强可维护性）

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

<div class="row">
    <div class="form-group col">
        <label class="form-control form-control-lg text-8 text-center">
            Live Balance : <br>
            <div id="live_totalbalance" class="d-inline-block fw-bold text-primary">—</div>
            /
            <div id="live_totalpreset" class="d-inline-block fw-bold text-secondary">—</div>
        </label>
    </div>
</div>

✅ 最佳实践总结

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