基于PHP、JavaScript和AJAX的登录功能开发问题咨询

安全阿岳

2026-5-29

嘿，我来帮你搞定这两个问题，顺便修正代码里的小bug，让你的AJAX登录功能正常跑起来～

问题1：获取用户名输入值的方式是否有效？

你的写法 var user = input.value['username']; 是完全无效的哦，原因有两个：

input 变量根本没定义，浏览器会直接报错；
就算拿到了输入框元素，也不是用 value['username'] 这种语法取值的。

正确的获取方式有两种，选哪种都可以：

方式一：给输入框加ID
先修改HTML里的用户名输入框，加上id属性：

Username: <input type="text" id="username" name="username" size="20" />

然后在JS里这样获取：

var username = document.getElementById('username').value;

方式二：通过name属性直接选择
不用加ID，直接用querySelector通过name属性定位元素：
```
var username = document.querySelector('input[name="username"]').value;
```

问题2：验证成功后如何跳转到privat.php？

当前代码有几个关键问题导致跳转逻辑失效，我一步步给你修正：

1. 后端需要返回结构化的验证结果

你的loggIn.php现在只返回用户名的JSON，但没法区分“登录成功”和“登录失败”。我们让它返回一个包含success状态的JSON对象，方便前端判断。另外，原来的loggIn.php里混了HTML代码，AJAX请求时会把HTML也返回，导致JSON解析错误，所以要把表单移到单独的页面（比如index.php），让loggIn.php只做接口处理。

修正后的loggIn.php：

<?php
session_start();

// 模拟用户数据（因为不能用MySQL，用数组存用户名密码）
$validUsers = [
    "andre" => "123456",
    "testuser" => "testpass"
];

$response = ["success" => false, "user" => null];

// 检查是否收到用户名和密码
if(isset($_POST['username']) && isset($_POST['password'])){
    $username = $_POST['username'];
    $password = $_POST['password'];
    
    // 验证用户名密码是否匹配
    if(isset($validUsers[$username]) && $validUsers[$username] === $password){
        $_SESSION['user'] = $username;
        $response["success"] = true;
        $response["user"] = $username;
    }
}

// 只返回JSON响应，不要输出其他内容
echo json_encode($response);
exit;
?>

2. 前端AJAX要正确传递数据并处理响应

原JS代码里的POST请求没有正确传递表单数据，也没阻止表单默认提交行为（点击按钮会刷新页面，AJAX请求就白发了）。修正后的ajax.js：

var ajaxRequest;

function init(){
    var button = document.getElementById('button');
    button.addEventListener("click", sendRequest, false);
}

function sendRequest(e){
    // 阻止表单默认提交，避免页面刷新
    e.preventDefault();
    
    // 每次请求创建新的XHR对象，避免复用旧对象的状态问题
    ajaxRequest = new XMLHttpRequest();
    ajaxRequest.onreadystatechange = getRequest;
    
    // 获取用户名和密码
    var username = document.querySelector('input[name="username"]').value;
    var password = document.querySelector('input[name="password"]').value;
    
    // 用FormData构造表单数据，浏览器会自动处理编码和请求头
    var formData = new FormData();
    formData.append('username', username);
    formData.append('password', password);
    
    ajaxRequest.open("POST", "loggIn.php", true);
    ajaxRequest.send(formData);
}

function getRequest(){
    if (ajaxRequest.readyState === 4 && ajaxRequest.status === 200){
        try {
            var jsonObj = JSON.parse(ajaxRequest.responseText);
            
            // 根据后端返回的success状态判断是否跳转
            if (jsonObj.success) {
                window.location.replace('privat.php');
            } else {
                alert('登录失败，请检查用户名或密码！');
            }
        } catch (err) {
            console.error('解析服务器响应失败:', err);
            alert('服务器出错了，请稍后再试');
        }
    }
}

window.addEventListener("load", init, false);

3. 完善其他页面的细节

把原来loggIn.php里的HTML表单移到新的index.php：

<!DOCTYPE html>
<html lang="sv">
<head>
    <meta charset="utf-8" >
    <title>Sessioner</title>
    <script type="text/javascript" src="ajax.js"></script>
</head>
<body>
<form method="post">
    Username: <input type="text" name="username" size="20" /><br />
    Password: <input type="password" name="password" size="20" /><br />
    <input type="submit" id="button" value="Logga in" name="login"/>
</form>
</body>
</html>

给privat.php加登录校验，防止未登录直接访问：

<?php
session_start();
// 如果没登录，跳回登录页
if(!isset($_SESSION['user'])){
    header("Location: index.php");
    exit;
}
?>
<a href="loggOut.php">Logga ut</a> <br>
<?php echo "user:" . $_SESSION['user']; ?>

内容的提问来源于stack exchange，提问作者André Nordquist