JavaScript登录重定向失效求助：弹窗后无法跳转至首页

嘿，我来帮你搞定这个问题！你的核心问题是表单提交的默认行为打断了JavaScript的弹窗逻辑，而且后端的Session判断也会直接跳走，导致弹窗根本没机会显示。下面一步步给你修复：

问题根源拆解 #

1. 当你点击submit按钮时，浏览器会同时做两件事：执行onclick里的myFunction()，以及触发表单提交刷新页面。页面刷新会直接中断JS代码，弹窗还没来得及显示就没了。
2. 更关键的是，登录成功后你设置了Session，页面刷新时最顶部的if(isset($_SESSION['on']))会立即触发header跳转，连弹窗的机会都不给。

完整修复方案 #

步骤1：调整后端Session跳转逻辑 #

修改最顶部的PHP代码，让它只在非登录提交的情况下才跳转，给弹窗留空间：

<?php 
session_start(); 
include ("dbconnectie.php"); 

// 只有当不是登录操作时，才检查Session并跳转
if(isset($_SESSION['on']) && !isset($_POST['login'])) { 
    header("location:homepage.php"); 
}

if(isset($_POST['login'])) { 
    $username = $_POST['username']; 
    $password = sha1($_POST['password']); 
    $query = $db->prepare("SELECT * FROM account WHERE username = :user AND password = :pass"); 
    $query->bindParam("user", $username); 
    $query->bindParam("pass", $password); 
    $query->execute(); 
    $result = $query->fetch(PDO::FETCH_ASSOC); 
    $id1 = $result['id_u']; 

    if($query->rowCount() == 1) { 
        $_SESSION['on'] = $username; 
        $_SESSION['id_u'] = $id1; 
        // 替换原有的header跳转，输出弹窗+跳转的JS代码
        echo '
        <script>
            window.onload = function() {
                var x = document.getElementById("snackbar");
                x.className = "show";
                // 3秒后隐藏弹窗并跳转
                setTimeout(function(){ 
                    x.className = x.className.replace("show", "");
                    window.location.href = "homepage.php";
                }, 3000);
            }
        </script>
        ';
    } else { 
        echo "The username and password do not match"; 
    } 
    echo "<br>"; 
} 
?>

步骤2：清理前端多余的JS和事件 #

把按钮上的onclick="myFunction()"删掉，恢复按钮的默认提交行为：

<button type="submit" class="submit" name="login" value="login">INLOGGEN</button>

然后移除前端的myFunction()脚本，现在不需要它了，弹窗逻辑已经由后端输出的JS处理。

修复后的流程 #

1. 用户输入账号密码，点击登录按钮，表单提交到后端。
2. 后端验证成功后，设置Session，并输出弹窗JS代码。
3. 页面加载完成后，弹窗显示3秒，然后自动跳转到首页。
4. 如果验证失败，后端直接输出错误提示，页面不会跳转。

这样就能完美实现你想要的“弹窗提示后跳转”效果啦！

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