PHP+JavaScript角色登录系统页面跳转异常求助

我正在开发一个基于PHP和JavaScript的角色权限登录系统，计划根据用户角色（student、tutor、admin）跳转至对应页面。目前登录验证流程看似正常，但即使登录成功并返回正确角色，也无法跳转至目标页面（如student.php）。以下是相关代码，恳请帮忙排查问题：

登录页面HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register</title>

    <link rel="stylesheet" href="css/form.css">
</head>

<body>

    <div class="form">
        <h2>Login Form</h2>
        <form action="" autocomplete="off">
            <div class="error-text">Error</div>

            <div class="input">
                <label>NIC</label>
                <input type="nic" name="nic" placeholder="Enter Your NIC" required>
            </div>

            <div class="input">
                <label>Password</label>
                <input type="password" name="password" placeholder="Enter Your Password" required>
            </div>

            <div class="submit">
                <input type="submit" value="Login Now" class="button">
            </div>
        </form>
        <div class="link">Not signup ? <a href="register.php">SignUp Now</a> </div>


    </div>

    <script>src="js/login.js"</script>


</body>

</html>

登录逻辑JS代码（login.js） #

const form = document.querySelector('.form form');
const submitbtn = form.querySelector('.submit input');
const errortxt = form.querySelector('.error-text');

form.onsubmit = (e) => {
    e.preventDefault();
};

submitbtn.onclick = () => {
    let xhr = new XMLHttpRequest();
    xhr.open("POST", "php/login.php", true);
    xhr.onload = () => {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
                let data = xhr.response.trim();
                console.log("Response:", data); // Log the response for debugging
                if (data === "student") {
                    location.href = "student.php";
                } else if (data === "tutor") {
                    location.href = "tutor.php";
                } else if (data === "admin") {
                    location.href = "admin.php";
                } else {
                    errortxt.textContent = data;
                    errortxt.style.display = "block";
                }
            }
        }
    };

    let formData = new FormData(form);
    xhr.send(formData);
};

后端验证PHP代码（php/login.php） #

<?php
session_start();
include 'db.php';

$nic = $_POST['nic'];
$password = md5($_POST["password"]);

if (!empty($nic) && !empty($password)) {
    $sql = mysqli_query($conn, "SELECT * FROM user_reg WHERE nic ='{$nic}' AND password = '{$password}'");
    if (mysqli_num_rows($sql) > 0) {
        $row = mysqli_fetch_assoc($sql);
        if ($row) {
            $_SESSION['nic'] = $row['nic'];
            $_SESSION['password'] = $row['password'];
            $role = $row['role']; // Ensure 'role' column exists and has the correct value
            echo $role; // Return the role instead of a success message
        }
    } else {
        echo "NIC or Password is Incorrect";
    }
} else {
    echo "All Fields are required";
}
?>

排查要点 #

• 确认响应内容匹配：打开浏览器控制台（F12），查看console.log输出的响应内容，确保返回的角色是纯小写的student/tutor/admin，没有空格、换行或其他多余字符。
• 修正PHP输出：在PHP中对角色值做去空格处理，改为echo trim($role);，避免数据库字段存在隐形空格导致匹配失败。
• 检查页面路径：确认目标页面（如student.php）与当前登录页面的路径关系，若不在同一目录，需调整location.href的路径（比如./student.php或绝对路径）。
• 排查PHP隐性输出：检查db.php是否有多余的空格、换行或echo输出，这些内容会混入响应结果，导致JS无法匹配角色字符串。
• 修正输入框类型：HTML中NIC输入框的type="nic"不是标准HTML类型，改为type="text"，避免浏览器解析异常导致FormData无法正确获取参数。
• 修复安全问题：当前PHP代码存在SQL注入风险，改用预处理语句；同时md5加密密码安全性极低，建议使用password_hash()和password_verify()处理密码。

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