如何在HTML页面通过JavaScript实现与MySQL数据库的交互？

Hey Tim, 很高兴能帮到你！你遇到的问题很典型——前端JavaScript确实没法直接连接MySQL数据库，得靠后端的PHP作为中间层来处理请求，这样就能实现实时的数据读写了。下面我给你一步步拆解实现方法：

JavaScript运行在浏览器端，出于安全和架构设计的原因，不能直接访问数据库。我们需要先写几个PHP接口（可以理解为后端的"数据中转站"），这些接口负责和MySQL交互；然后前端通过JS的fetch（或者XMLHttpRequest）发送GET/POST请求到这些PHP接口，间接完成数据的读写。

首先你需要两个核心的PHP文件：一个处理数据查询（GET请求），一个处理数据保存（POST请求）。注意一定要用预处理语句防止SQL注入，这是重中之重！

示例1：获取游戏数据的接口（get_game_data.php） #

<?php
// 数据库配置，替换成你的实际信息
$host = 'localhost';
$dbname = 'your_game_database';
$username = 'your_db_user';
$password = 'your_db_password';

try {
    // 初始化PDO连接
    $pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8", $username, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    // 获取前端传过来的用户ID（必须做参数校验）
    $userId = $_GET['user_id'] ?? '';
    if (empty($userId)) {
        echo json_encode(['success' => false, 'message' => '缺少用户ID参数']);
        exit;
    }

    // 预处理SQL语句，防止SQL注入
    $stmt = $pdo->prepare("SELECT score, level, last_play_time FROM game_data WHERE user_id = ?");
    $stmt->execute([$userId]);
    $gameData = $stmt->fetch(PDO::FETCH_ASSOC);

    // 返回JSON格式的结果
    if ($gameData) {
        echo json_encode(['success' => true, 'data' => $gameData]);
    } else {
        echo json_encode(['success' => false, 'message' => '未找到该用户的游戏数据']);
    }
} catch(PDOException $e) {
    echo json_encode(['success' => false, 'message' => '数据库错误：' . $e->getMessage()]);
}
?>

示例2：保存游戏数据的接口（save_game_data.php） #

<?php
// 设置返回内容为JSON格式
header('Content-Type: application/json');

// 数据库配置，替换成你的实际信息
$host = 'localhost';
$dbname = 'your_game_database';
$username = 'your_db_user';
$password = 'your_db_password';

try {
    $pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8", $username, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    // 获取前端POST过来的JSON数据
    $inputData = json_decode(file_get_contents('php://input'), true);
    $userId = $inputData['user_id'] ?? '';
    $score = $inputData['score'] ?? 0;
    $level = $inputData['level'] ?? 1;

    // 参数校验
    if (empty($userId) || !is_numeric($score) || !is_numeric($level)) {
        echo json_encode(['success' => false, 'message' => '参数格式错误']);
        exit;
    }

    // 插入或更新数据（用REPLACE INTO或者INSERT ... ON DUPLICATE KEY UPDATE，根据你的需求选）
    $stmt = $pdo->prepare("REPLACE INTO game_data (user_id, score, level, last_play_time) VALUES (?, ?, ?, NOW())");
    $stmt->execute([$userId, $score, $level]);

    echo json_encode(['success' => true, 'message' => '游戏数据保存成功']);
} catch(PDOException $e) {
    echo json_encode(['success' => false, 'message' => '数据库错误：' . $e->getMessage()]);
}
?>

现在可以用JS的fetch API（现代浏览器都支持）来实时调用上面的PHP接口，实现数据的读写。

示例1：实时获取游戏数据（GET请求） #

// 封装获取游戏数据的函数
async function getGameData(userId) {
    try {
        // 发送GET请求，注意对用户ID做URL编码
        const response = await fetch(`get_game_data.php?user_id=${encodeURIComponent(userId)}`);
        const result = await response.json();

        if (result.success) {
            // 成功获取数据，这里可以更新页面显示
            console.log('当前游戏数据：', result.data);
            document.getElementById('score-display').textContent = `当前分数：${result.data.score}`;
            document.getElementById('level-display').textContent = `当前关卡：${result.data.level}`;
        } else {
            console.error('获取数据失败：', result.message);
        }
    } catch (error) {
        console.error('请求出错：', error);
    }
}

// 调用示例：比如用户登录后立即获取数据
getGameData('player_1001');

// 如果需要定时刷新数据（比如每2秒同步一次），可以用setInterval
setInterval(() => getGameData('player_1001'), 2000);

示例2：实时保存游戏数据（POST请求） #

// 封装保存游戏数据的函数
async function saveGameData(userId, score, level) {
    try {
        const response = await fetch('save_game_data.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json', // 告诉后端我们传的是JSON
            },
            body: JSON.stringify({
                user_id: userId,
                score: score,
                level: level
            })
        });
        const result = await response.json();

        if (result.success) {
            console.log('数据保存成功！');
        } else {
            console.error('保存失败：', result.message);
        }
    } catch (error) {
        console.error('请求出错：', error);
    }
}

// 调用示例：比如游戏得分变化时触发保存
saveGameData('player_1001', 1800, 6);

• 实时性升级：如果你的游戏需要更即时的同步（比如多人对战），可以考虑用WebSocket代替定时轮询，不过对于小型单机游戏，定时轮询已经足够。
• 安全加固：
  • 给接口加简单的身份验证（比如传递用户token），防止恶意请求。
  • 后端对所有输入参数做严格校验（比如分数不能为负数、关卡必须是正整数）。
• 错误处理：前端可以在请求失败时给用户友好提示（比如"网络连接失败，请稍后重试"）。

内容的提问来源于stack exchange，提问作者Tim Jefferson