首先，在 HTML 页面中构建一组复选框元素。每个复选框代表一个筛选条件，例如技术类别：“前端”、“后端”、“数据库”、“运维”等。结构如下：

html

接下来是核心逻辑：每当用户点击任意复选框，立即通过 Ajax 将当前所有已选中的值发送到服务器。这里使用 jQuery 的 change 事件监听器绑定到所有复选框上，确保每次状态变更都能被捕获。

javascript
$(document).ready(function () {
$('input[name="category"]').on('change', function () {
// 收集所有被选中的复选框值
var selectedValues = [];
$('input[name="category"]:checked').each(function () {
selectedValues.push($(this).val());
});

    // 使用 Ajax 发送到服务器
    $.ajax({
        url: '/save-filter-session.php', // 后端处理脚本
        type: 'POST',
        data: { categories: selectedValues },
        dataType: 'json',
        success: function (response) {
            console.log('筛选条件已保存至 Session');
        },
        error: function (xhr, status, error) {
            console.error('保存失败：', error);
        }
    });
});

});

上述代码中，selectedValues 数组用于收集当前所有被勾选的值。通过 $.ajax() 方法，我们将这个数组以 POST 方式提交到名为 save-filter-session.php 的 PHP 脚本。注意，Ajax 请求是异步的，因此不会阻塞页面操作，用户体验流畅自然。

在服务端，我们需要一个能够接收数据并写入 Session 的处理程序。以下是 save-filter-session.php 的实现示例：

php
<?php
session_start();

// 确保是 POST 请求且包含数据
if ($SERVER['REQUESTMETHOD'] === 'POST' && isset($POST['categories'])) { $categories = $POST['categories'];

// 验证数据类型是否为数组，防止注入
if (is_array($categories)) {
    // 过滤非法值（可选安全措施）
    $allowed = ['frontend', 'backend', 'database', 'devops'];
    $filtered = array_intersect($categories, $allowed);

    // 存储到 Session
    $_SESSION['user_filters'] = array_values($filtered);

    echo json_encode(['status' => 'success', 'message' => '筛选条件已保存']);
} else {
    http_response_code(400);
    echo json_encode(['status' => 'error', 'message' => '无效的数据格式']);
}

} else {
httpresponsecode(405);
echo json_encode(['status' => 'error', 'message' => '请求方法不支持']);
}
?>

该脚本首先启动 Session，然后检查请求方式和参数是否存在。接着对传入的数据进行合法性校验，只允许预定义的选项进入 Session，避免恶意输入。最终将清洗后的数据存入 $_SESSION['user_filters']，供后续页面读取使用。

为了体现“实时性”，整个过程无需页面刷新。用户勾选“前端”和“数据库”后，即使关闭浏览器再打开，只要 Session 未过期，系统仍能从服务器恢复上次的选择状态。这种机制特别适用于个性化设置、多步骤表单或复杂筛选面板。

此外，我们还可以在页面加载时反向操作：从 Session 中读取已有选择，并自动勾选对应的复选框。这需要另一个 Ajax 请求或在初始 HTML 渲染时注入数据。例如，在页面加载完成后执行初始化：

javascript $(document).ready(function () { // 页面加载时获取已保存的筛选项 $.get('/get-filter-session.php', function (data) { if (data.categories && Array.isArray(data.categories)) { data.categories.forEach(function (value) { $('input[name="category"][value="' + value + '"]').prop('checked', true); }); } }, 'json'); });

配合相应的 PHP 接口返回当前 Session 数据：

php
<?php
session_start();
header('Content-Type: application/json');

$filters = isset($SESSION['userfilters']) ? $SESSION['userfilters'] : [];
echo json_encode(['categories' => $filters]);
?>

这样一来，前后端形成了完整的闭环：用户操作触发 Ajax 提交 → 服务端更新 Session → 页面重载时恢复状态。整个流程静默进行，用户几乎感知不到背后的数据流动，却实实在在享受到了连续一致的操作体验。

在整个实现过程中，jQuery 简化了 DOM 操作与事件绑定，Ajax 实现了无刷新通信，而 Session 则提供了跨请求的状态保持能力。三者协同工作，构成了一个轻量但高效的解决方案。对于中小型项目而言，无需引入复杂的前端框架，也能实现接近 SPA 的交互效果。