树莓派楼宇自动化：网页LED状态切换（MySQL驱动）问题排查

嘿，我帮你梳理下这个问题——你已经把MySQL里的LED状态值传到JS变量了，但页面没法正确切换LED图片，大概率是JavaScript的条件判断或者DOM操作环节出了小问题，咱们一步步来排查修复：

先确认PHP到JS的传值是否正确 #

首先得确保数据库的值确实传到了JS里，先把你的PHP代码补全并做个验证：

<?php
$db_host = 'localhost';
$db_user = 'root';
$db_pass = '******';
$db_name = '你的数据库名称'; // 记得补充上你的数据库名

// 建立数据库连接
$conn = mysqli_connect($db_host, $db_user, $db_pass, $db_name);
if (!$conn) {
    die("连接失败: " . mysqli_connect_error());
}

// 查询LED状态（替换成你的表名和字段名）
$sql = "SELECT led_status FROM 你的设备表 LIMIT 1";
$result = mysqli_query($conn, $sql);

// 默认设为关闭状态（值1）
$ledStatus = 1;
if (mysqli_num_rows($result) > 0) {
    $row = mysqli_fetch_assoc($result);
    $ledStatus = $row['led_status'];
}

mysqli_close($conn);
?>

<!-- 把PHP变量传给JS，顺便在控制台打印验证 -->
<script>
const ledStatus = <?php echo $ledStatus; ?>;
console.log("当前LED状态值：", ledStatus); // 按F12打开控制台看这个值对不对
</script>

先检查控制台里的ledStatus是不是和数据库里的1/0一致，如果这里值不对，先排查PHP的数据库查询逻辑，比如表名、字段名是不是写错了。

修复JS的图片切换逻辑 #

假设你页面里有个用来显示LED的<img>标签：

<img id="ledImage" src="" alt="LED状态">

接下来写JS逻辑来切换图片，这里要注意几个容易踩坑的点：

// 先获取LED图片元素
const ledImg = document.getElementById('ledImage');

// 等页面DOM加载完成再执行（避免找不到元素）
document.addEventListener('DOMContentLoaded', function() {
    // 严格判断状态值，注意是数字还是字符串
    if (ledStatus === 1) {
        // 值1对应关闭，显示灰色LED
        ledImg.src = 'grey-led.png'; // 替换成你的灰色图片实际路径
        ledImg.alt = 'LED已关闭';
    } else if (ledStatus === 0) {
        // 值0对应开启，显示红色LED
        ledImg.src = 'red-led.png'; // 替换成你的红色图片实际路径
        ledImg.alt = 'LED已开启';
    } else {
        // 处理异常值，比如数据库返回了其他数字
        ledImg.src = 'error-led.png';
        ledImg.alt = '状态异常';
    }
});

常见坑点排查 #

• 图片路径错误：确保图片和网页在同一目录，或者用正确的相对/绝对路径，比如/assets/images/grey-led.png
• 类型不匹配：如果PHP输出的是字符串（比如不小心加了引号），那判断要改成ledStatus === "1"，或者用parseInt(ledStatus) === 1转成数字再判断
• DOM加载顺序：如果JS代码写在<img>标签前面，会找不到元素，所以要么把JS放在<body>末尾，要么用上面的DOMContentLoaded事件包裹

完整的可运行示例 #

把所有代码整合到一个页面的样子：

<!DOCTYPE html>
<html>
<head>
    <title>LED状态监控</title>
</head>
<body>
    <h1>当前LED状态</h1>
    <img id="ledImage" src="" alt="LED状态">

    <?php
    $db_host = 'localhost';
    $db_user = 'root';
    $db_pass = '******';
    $db_name = 'building_automation'; // 替换成你的数据库名
    $conn = mysqli_connect($db_host, $db_user, $db_pass, $db_name);
    
    if (!$conn) {
        die("数据库连接失败: " . mysqli_connect_error());
    }
    
    // 替换成你的表名和查询条件，比如按设备ID查
    $sql = "SELECT led_status FROM devices WHERE device_id = 'main_led' LIMIT 1";
    $result = mysqli_query($conn, $sql);
    $ledStatus = 1;
    
    if (mysqli_num_rows($result) > 0) {
        $row = mysqli_fetch_assoc($result);
        $ledStatus = $row['led_status'];
    }
    
    mysqli_close($conn);
    ?>

    <script>
        const ledStatus = <?php echo $ledStatus; ?>;
        const ledImg = document.getElementById('ledImage');

        document.addEventListener('DOMContentLoaded', function() {
            if (ledStatus === 1) {
                ledImg.src = 'grey-led.png';
                ledImg.alt = 'LED已关闭';
            } else if (ledStatus === 0) {
                ledImg.src = 'red-led.png';
                ledImg.alt = 'LED已开启';
            } else {
                ledImg.src = 'error.png';
                ledImg.alt = '状态未知';
            }
        });
    </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者zaheer afzal