基于PHP、AJAX、JavaScript的多显示器远程控制系统单屏更新问题

问题根源 #

你的代码出现全屏刷新的核心原因有两个：

1. 状态判断逻辑不严谨：AJAX返回的响应是字符串类型，但你直接和数字类型的显示器ID做弱相等比较，可能出现非预期匹配；同时未处理响应中的空格/换行，容易触发错误分支。
2. 状态存储无隔离：check_reload.php未针对每个显示器ID维护独立状态，导致触发某一显示器时，所有显示器请求都拿到相同的触发信号。

分步解决方案 #

1. 修正monitor.php的AJAX判断逻辑

修改JavaScript部分，统一使用严格字符串比较，并清理响应内容：

<html>
<style>
    @font-face {font-family: "Font Digital"; src: url('dist/fonts/FS Albert Pro.otf');}
</style>

<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<body style="overflow:hidden; margin:0px; font-family:'Font Digital';">
    <?php $id_komputer = $_GET['id'];?>
    <table width="100%" height="100%" bgcolor="#1a1a1a">
        <tr>
            <td align="center" valign="middle"><p style="font-size:40px; color:#ffffff;">MONITOR <?=$id_komputer?></p></td>
        </tr>
    </table>

    <script type="text/javascript">
        function checkReload() {
            $.ajax({
                url: "check_reload.php?id=<?=$id_komputer?>",
                cache: false, // 禁用浏览器缓存，确保拿到最新状态
                success: function(response) {
                    const cleanResponse = response.trim(); // 清理响应中的空格/换行
                    const currentMonitorId = "<?=$id_komputer?>";

                    if (cleanResponse === "standby") {
                        // 无操作
                    } else if (cleanResponse === currentMonitorId) {
                        window.location.href = "video.php?id=<?=$id_komputer?>";
                    } else if (cleanResponse === "all") {
                        window.location.href = "video.php?id=<?=$id_komputer?>";
                    } else {
                        alert("发生错误");
                    }
                },
                error: function() {
                    alert("状态检查请求失败");
                }
            });
        }
        setInterval(checkReload, 1000);
    </script>
</body>
</html>

2. 实现独立状态管理的check_reload.php

使用Session为每个显示器维护独立状态，读取后立即重置避免重复触发：

<?php
session_start();
$monitorId = $_GET['id'] ?? '';

// 初始化状态（如果对应显示器状态不存在）
if (!isset($_SESSION['monitor_status'][$monitorId])) {
    $_SESSION['monitor_status'][$monitorId] = 'standby';
}

// 返回当前显示器的状态
echo $_SESSION['monitor_status'][$monitorId];

// 重置状态为待机，防止重复触发
$_SESSION['monitor_status'][$monitorId] = 'standby';
?>

3. 控制页index.php的触发逻辑

添加按钮触发接口，仅更新目标显示器的状态：

<!-- index.php 示例按钮 -->
<button onclick="triggerMonitor(1)">切换显示器1</button>
<button onclick="triggerMonitor(2)">切换显示器2</button>
<button onclick="triggerMonitor(3)">切换显示器3</button>
<button onclick="triggerAll()">切换所有显示器</button>

<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script>
function triggerMonitor(id) {
    $.ajax({
        url: "set_monitor_status.php",
        method: "POST",
        data: { monitor_id: id },
        success: function() {
            console.log("已触发显示器" + id);
        }
    });
}

function triggerAll() {
    $.ajax({
        url: "set_monitor_status.php",
        method: "POST",
        data: { trigger_all: true },
        success: function() {
            console.log("已触发所有显示器");
        }
    });
}
</script>

4. 状态设置接口set_monitor_status.php

接收控制页的触发请求，更新对应显示器的状态：

<?php
session_start();

if (isset($_POST['monitor_id'])) {
    $monitorId = $_POST['monitor_id'];
    $_SESSION['monitor_status'][$monitorId] = $monitorId;
} elseif (isset($_POST['trigger_all'])) {
    // 若触发所有显示器，批量设置状态
    foreach (['1', '2', '3'] as $id) {
        $_SESSION['monitor_status'][$id] = 'all';
    }
}
?>

关键说明 #

• 状态隔离：通过Session的数组结构，为每个显示器ID分配独立的状态字段，确保触发操作仅影响目标显示器。
• 严格匹配：使用===严格字符串比较，避免类型转换导致的非预期匹配。
• 缓存禁用：AJAX请求添加cache: false，防止浏览器返回旧的状态响应。

内容的提问来源于stack exchange，提问作者Gerald 28