如何用原生AJAX无刷新修改PHP SESSION变量（不使用jQuery）

前端部分调整 #

首先你原有的表单写法不符合规范，不能直接把JS函数写在action属性中，调整为如下结构即可：

<!-- 也可以直接去掉form标签，只用按钮元素 -->
<form id="modifySessionForm">
    <input type="submit" value="X" id="close">
</form>

原生JS实现AJAX请求（无jQuery） #

在页面任意位置添加如下JS代码即可，优先放在页面底部（</body>标签前）加载：

// 监听表单提交事件
document.getElementById('modifySessionForm').addEventListener('submit', function(e) {
    // 阻止表单默认跳转刷新的行为
    e.preventDefault();
    // 发起请求，这里用兼容性更好的XMLHttpRequest实现
    const xhr = new XMLHttpRequest();
    // 填写后端处理请求的PHP文件地址，比如/update_session.php
    xhr.open('GET', 'update_session.php', true);
    xhr.onload = function() {
        if (xhr.status === 200) {
            // 此处可自定义修改成功后的操作，比如隐藏对应模块、弹出提示等
            console.log('SESSION变量修改完成');
        }
    };
    xhr.send();
});

如果你的项目不需要兼容非常旧的浏览器，也可以用更简洁的fetch API实现，代码量更少：

document.getElementById('modifySessionForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    try {
        await fetch('update_session.php');
        // 成功后自定义操作
        console.log('SESSION变量修改完成');
    } catch (err) {
        console.log('请求出错', err);
    }
});

如果选择去掉form标签，只保留按钮的话，只需要把监听的事件改为按钮的click事件即可，不需要再阻止表单默认行为：

document.getElementById('close').addEventListener('click', async function() {
    await fetch('update_session.php');
    console.log('SESSION变量修改完成');
});

后端PHP实现 #

新建update_session.php文件，代码如下，注意必须先启动SESSION才能操作变量：

<?php
// 这行不能省略，必须先启动SESSION
session_start();
// 修改对应的SESSION变量
$_SESSION["variable"] = false;
// 可选：返回成功标识给前端
echo 'success';
?>

内容的提问来源于stack exchange，提问作者4bZürd