如何通过HTML按钮调用PHP修改SESSION实现页面日夜模式切换

我有一个HTML表格，想要实现夜间模式与日间模式切换。表格内元素会根据class设置为condition_night或condition_day显示不同颜色。由于页面会频繁刷新，我尝试使用PHP SESSION对象来跨刷新保存页面模式状态。以下是我编写的基础示例代码：

<?php

session_start();

if(isset($_SESSION['MODE']) && $_SESSION['MODE'] === 'night'){
    $mode = 'night';
} else {
    $mode = 'day';
};

?>
<style>
    .condition_night {
        background-color: grey;
        color: black;
    }
    .condition_day {
        background-color: blue;
        color: white;
    }
    
</style>
<table>
    <thead>
        <tr>
            <th class="condition_<?=$mode;?>">Person</th>
            <th class="condition_<?=$mode;?>">Score</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>James</td>
            <td>100%</td>
        </tr>
    </tbody>
    
</table>


<input type="button" name="night_mode" class="btn btn-secondary" value="Night Mode" onclick="change_session_day.php;" data-dismiss="modal" style="width: 170px;margin-top: 5px;margin-bottom: 5px;"/>
                    
<input type="button" name="day_mode" class="btn btn-secondary" value="Day Mode" onclick="change_session_day.php;" data-dismiss="modal" style="width: 170px;margin-top: 5px;margin-bottom: 5px;"/>

我清楚当前页面底部的按钮无法正常工作，仅作为示例展示需求。请问能否实现让按钮调用独立PHP脚本修改$_SESSION['MODE']变量，之后刷新页面使新的颜色样式生效？我设想的PHP脚本大致如下：

<?php
    
    session_start();
    $_SESSION['MODE']="day";

   //Refresh page here
?>

当然可以实现，下面提供两种可行的方案：

方案一：表单提交（简单直接） #

不需要单独的PHP脚本，直接在当前页面处理模式切换请求，再重定向回原页面避免重复提交问题。

修改后的主页面代码 #

<?php
session_start();

// 处理模式切换请求
if(isset($_GET['mode'])){
    $newMode = $_GET['mode'] === 'night' ? 'night' : 'day';
    $_SESSION['MODE'] = $newMode;
    // 重定向回当前页面，防止重复提交
    header("Location: " . $_SERVER['PHP_SELF']);
    exit;
}

// 确定当前模式
$mode = isset($_SESSION['MODE']) && $_SESSION['MODE'] === 'night' ? 'night' : 'day';
?>
<style>
    .condition_night {
        background-color: grey;
        color: black;
    }
    .condition_day {
        background-color: blue;
        color: white;
    }
</style>
<table>
    <thead>
        <tr>
            <th class="condition_<?=$mode;?>">Person</th>
            <th class="condition_<?=$mode;?>">Score</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>James</td>
            <td>100%</td>
        </tr>
    </tbody>
</table>

<!-- 用带参数的链接实现模式切换 -->
<a href="?mode=night" class="btn btn-secondary" style="width: 170px;margin-top: 5px;margin-bottom: 5px;">Night Mode</a>
<a href="?mode=day" class="btn btn-secondary" style="width: 170px;margin-top: 5px;margin-bottom: 5px;">Day Mode</a>

如果坚持用按钮触发，可将按钮放入表单：

<form method="get" style="display: inline;">
    <input type="hidden" name="mode" value="night">
    <button type="submit" class="btn btn-secondary" style="width: 170px;margin-top: 5px;margin-bottom: 5px;">Night Mode</button>
</form>
<form method="get" style="display: inline;">
    <input type="hidden" name="mode" value="day">
    <button type="submit" class="btn btn-secondary" style="width: 170px;margin-top: 5px;margin-bottom: 5px;">Day Mode</button>
</form>

方案二：AJAX调用独立脚本（无感知修改后刷新） #

先通过AJAX调用独立PHP脚本修改Session，再用JS刷新页面。

1. 创建独立脚本change_mode.php #

<?php
session_start();

if(isset($_POST['mode'])){
    // 验证输入合法性，防止非法值写入Session
    $validModes = ['day', 'night'];
    $mode = in_array($_POST['mode'], $validModes) ? $_POST['mode'] : 'day';
    $_SESSION['MODE'] = $mode;
    echo json_encode(['success' => true]);
} else {
    echo json_encode(['success' => false]);
}
?>

2. 修改主页面的按钮与JS逻辑 #

<?php
session_start();
$mode = isset($_SESSION['MODE']) && $_SESSION['MODE'] === 'night' ? 'night' : 'day';
?>
<style>
    .condition_night {
        background-color: grey;
        color: black;
    }
    .condition_day {
        background-color: blue;
        color: white;
    }
</style>
<table>
    <thead>
        <tr>
            <th class="condition_<?=$mode;?>">Person</th>
            <th class="condition_<?=$mode;?>">Score</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>James</td>
            <td>100%</td>
        </tr>
    </tbody>
</table>

<input type="button" name="night_mode" class="btn btn-secondary" value="Night Mode" onclick="changeMode('night')" style="width: 170px;margin-top: 5px;margin-bottom: 5px;"/>
<input type="button" name="day_mode" class="btn btn-secondary" value="Day Mode" onclick="changeMode('day')" style="width: 170px;margin-top: 5px;margin-bottom: 5px;"/>

<script>
function changeMode(mode){
    fetch('change_mode.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: 'mode=' + mode
    })
    .then(response => response.json())
    .then(data => {
        if(data.success){
            // 刷新当前页面应用新样式
            window.location.reload();
        }
    })
    .catch(error => console.error('切换失败:', error));
}
</script>

关键注意事项 #

• 所有操作Session的PHP文件必须先调用session_start()，否则无法读写Session。
• 用header("Location: ...")重定向可避免页面刷新后重复提交请求的问题。
• 对传入的模式值做合法性验证，提升代码安全性。

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