PHP AJAX 使用者登入入門範例

前端頁面 (login.html)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>AJAX 登入範例</title>
</head>
<body>
    <form id="loginForm" onsubmit="return chk_login(this);">
        <label>使用者名稱：<input name="username" type="text" required></label><br>
        <label>密碼：<input name="password" type="password" required></label><br>
        <input type="submit" value="登入">
    </form>
    <div id="msg"></div>

    <script>
    function chk_login(form) {
        var username = form.username.value.trim();
        var password = form.password.value.trim();

        if (!username) { alert("使用者名稱不可為空"); form.username.focus(); return false; }
        if (!password) { alert("密碼不可為空"); form.password.focus(); return false; }

        // 使用 Fetch API (現代瀏覽器) 替代舊式 XMLHttpRequest
        var url = 'login_chk.php?username=' + encodeURIComponent(username) + '&password=' + encodeURIComponent(password);
        
        fetch(url)
            .then(response => response.text())
            .then(msg => {
                if (msg === "1") {
                    alert("登入成功");
                    window.location = 'index.php?name=' + encodeURIComponent(username);
                } else if (msg === "2") {
                    alert("帳號或密碼錯誤");
                } else {
                    alert("伺服器回應：" + msg);
                }
            })
            .catch(err => { console.error(err); alert("請求失敗，請稍後再試"); });

        return false; // 防止表單傳統提交
    }
    </script>
</body>
</html>

後端處理 (login_chk.php)

<?php
// 實際專案請務必使用預處理語句防止 SQL 注入，並採用密碼雜湊驗證
$username = isset($_GET['username']) ? $_GET['username'] : '';
$password = isset($_GET['password']) ? $_GET['password'] : '';

// 這裡僅示範邏輯，實際應連接資料庫查詢
// $stmt = $pdo->prepare("SELECT password_hash FROM users WHERE username = ?");
// $stmt->execute([$username]);
// $user = $stmt->fetch();
// if ($user && password_verify($password, $user['password_hash'])) { echo "1"; } else { echo "2"; }

// 測試用固定回傳
if ($username === 'admin' && $password === '123456') {
    echo "1"; // 成功
} else {
    echo "2"; // 失敗
}
?>

關鍵點總結

• 前端驗證：攔截空值提交，提升使用者體驗。
• 非同步請求：範例使用現代 fetch() API，比舊式 XMLHttpRequest 更簡潔 (舊式程式碼常因 xmlhttp 變數未定義而失效)。
• 資料編碼：使用 encodeURIComponent() 處理特殊字元，防止 URL 注入。
• 後端安全：絕不可 直接在 SQL 中拼接變數，必須使用 PDO/MySQLi 預處理語句；密碼需以 password_hash() 儲存並用 password_verify() 驗證。
• 回應格式：建議回傳 JSON 格式 (如 {"status":1, "msg":"成功"}) 而非純文字，方便擴充。

進階建議

• 採用 POST 方法傳送密碼，避免出現在 URL / 伺服器日誌中。
• 實作 CSRF Token 防禦跨站請求偽造。
• 登入成功後建立 Session 或簽發 JWT Token 管理狀態。