PHP网页中基于AJAX实现的登出功能无法正常运行问题求助

现存问题 #

• 按钮未设置value属性，AJAX请求传递的logout_session_PHP参数为空，导致PHP端判断条件不触发。你的按钮仅定义了name属性，调用.val()获取到的是空值，POST参数中logout_session_PHP不存在，自然不会执行登出逻辑。
• PHP处理AJAX请求的逻辑位置错误，返回JSON前存在大量HTML输出，导致JSON格式被破坏。当前代码先输出所有HTML、script标签内容，再输出JSON字符串，最终返回前端的是HTML+JSON的混合内容，jQuery无法将其解析为合法JSON，不会触发success回调。
• Session销毁逻辑不完整，仅清空$_SESSION数组没有彻底销毁会话，还需要销毁服务端session存储数据、清除客户端的session cookie避免会话残留。

修复后的完整代码 #

<?php 
session_start();
// 登出逻辑放到最顶部，处理AJAX请求后直接终止输出，避免返回多余内容
if (isset($_POST['logout_session_PHP']) && isset($_SESSION['username'])) 
{
    // 完整销毁会话的标准逻辑
    $_SESSION = array();
    // 清除客户端session cookie
    if (ini_get("session.use_cookies")) {
        $params = session_get_cookie_params();
        setcookie(session_name(), '', time() - 42000,
            $params["path"], $params["domain"],
            $params["secure"], $params["httponly"]
        );
    }
    session_destroy();
    $logout_ajax = array("logout_msg" => "Successfully logout");
    echo json_encode($logout_ajax);
    // 输出JSON后直接退出，不返回后续HTML内容
    exit;
}
?>
<!-- 给按钮添加value属性，保证AJAX传参正常 -->
<button name="logout_button" value="1">Logout</button> <span id="button_logout_id"></span>
<script src="jquery-3.6.0.min.js"></script>
<script>
    jQuery("button[name=logout_button]").on("click", function() {
        jQuery.ajax({
            method: 'POST',
            url: 'home.php',
            data: {
                logout_session_PHP: jQuery("button[name=logout_button]").val()
            },
            dataType: 'json',
            success: function(responseJSON) {
                jQuery("#button_logout_id").html(responseJSON.logout_msg);
                if (responseJSON.logout_msg == "Successfully logout") {
                    window.location = "index.php";
                }
            }
        });
    });
</script>

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