AJAX 驗證用戶名密碼實戰：原生 JS 與 jQuery 兩種實現方案

前端異步驗證用戶憑證完整代碼

方案一：原生 XMLHttpRequest

<script>
var user = form.name.value;
var password = form.password.value;
var url = "chkname.php?user=" + user + "&password=" + password;

xmlhttp.open("GET", url, true);
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4) {
        var msg = xmlhttp.responseText;
        if (msg == '1') {
            alert('用戶名或密碼錯誤!!');
            form.password.select();
            return false;
        }
        if (msg == "3") {
            alert("用戶名被占用，請重新輸入！");
            return false;
        }
        alert('歡迎光臨');
        location.reload();
    }
};
xmlhttp.send(null);
return false;
</script>

方案二：jQuery + Load 方法（推薦）

<script src="jquery.js"></script>
<script>
$(document).ready(function() {
    $("#submit").click(function() {
        if ($("#uname").val() == "" || $("#upas").val() == "") {
            alert("用戶名或者密碼不能為空");
            return false;
        }
        $("#showerrormessage").load(
            '/index/login',
            {uname: $("#uname").val(), upas: $("#upas").val()},
            function(data) {
                if (data == 1) {
                    $("#showerrormessage").html('login success!!!');
                } else {
                    $("#showerrormessage").html('login error~~~');
                }
            }
        );
    });
});
</script>

後端 PHP 驗證邏輯（示例）

<?php
// chkname.php 或 /index/login
$user = $_GET['user'] ?? $_POST['uname'];
$pass = $_GET['password'] ?? $_POST['upas'];

// 數據庫查詢驗證...
$valid = check_user_pass($user, $pass);

if (!$valid) {
    echo '1';  // 錯誤
} elseif (user_exists($user)) {
    echo '3';  // 被占用
} else {
    echo '0';  // 成功（或設置 Session 後返回 1）
}

安全建議

1. 使用 POST：登錄請求應用 POST 避免密碼留在 URL/日誌
2. HTTPS：生產環境強制 HTTPS 傳輸
3. 限流：增加驗證碼或 IP 限流防暴力破解
4. 密碼加密：資料庫存儲 bcrypt/scrypt/argon2 哈希，不可明文
5. CSRF 防護：表單攜帶 Token 驗證

原生 JS 方案適合無依賴環境，現代項目強烈建議使用 jQuery/Axios/Fetch API 簡化異步處理。