PHP AJAX 登錄完整實現：前端表單驗證、XMLHttpRequest 異步請求、後端驗證碼校驗、JSON 交互、Session 管理

傳統表單提交登錄會導致頁面跳轉/刷新，體驗差。本文構建純原生 JavaScript（無 jQuery 依賴）+ PHP的 AJAX 登錄系統：前端表單驗證 → XMLHttpRequest 異步 POST → 後端驗證碼/賬號密碼校驗 → JSON 響應 → 登錄成功跳轉，附帶驗證碼刷新、錯誤提示、加載狀態完整交互。

一、數據庫準備

CREATE TABLE `users` (
  `id` INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
  `username` VARCHAR(50) NOT NULL UNIQUE,
  `password` CHAR(60) NOT NULL, -- bcrypt hash
  `created_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

-- 測試用戶：admin / 123456 (bcrypt)
INSERT INTO `users` (`username`, `password`) VALUES
('admin', '$2y$10$e0NRX...'); -- password_hash('123456', PASSWORD_BCRYPT)

二、前端頁面 login.php

用戶登錄


    

        用戶名
        
    
    

        密碼
        
    
    

        驗證碼
        
        
    
    登錄
    
驗證中...

三、驗證碼生成 captcha.php

四、後端驗證 dologin.php
 401, 'msg' => '驗證碼錯誤']));
}

// 2. 賬號密碼校驗
try {
    $pdo = new PDO('mysql:host=localhost;dbname=test;charset=utf8mb4', 'root', '123');
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    $stmt = $pdo->prepare('SELECT id, password FROM users WHERE username = ?');
    $stmt->execute([$username]);
    $user = $stmt->fetch(PDO::FETCH_ASSOC);

    if (!$user || !password_verify($password, $user['password'])) {
        exit(json_encode(['code' => 400, 'msg' => '用戶名或密碼錯誤']));
    }

    // 3. 登錄成功：寫入 Session、再生成 ID 防固定
    session_regenerate_id(true);
    $_SESSION['user_id'] = $user['id'];
    $_SESSION['username'] = $username;

    exit(json_encode(['code' => 200, 'msg' => '登錄成功']));
} catch (PDOException $e) {
    error_log($e->getMessage());
    exit(json_encode(['code' => 500, 'msg' => '系統錯誤，請稍後重試']));
}

五、受保護頁面示例 index.php
歡迎，{$_SESSION['username']}！";
echo '退出登錄';

六、登出 logout.php


七、安全與體驗加固清單

  
項目
措施
  
密碼存儲
password_hash() + password_verify()，禁用 MD5/SHA1
  
SQL 注入
PDO 預處理綁定參數
  
暴力破解
同 IP 15 分鐘限制 5 次失敗（Redis 計數），賬號鎖定機制
  
CSRF
登錄表單隱藏 csrf_token，後端驗證（本例簡化省略）
  
Session 安全
session.cookie_httponly=1、session.cookie_secure=1（HTTPS）、session.use_strict_mode=1
  
驗證碼強度
生產環境建議用 Google reCAPTCHA v3 / 極驗 / 阿里云 驗證碼替換簡易數字圖片
  
HTTPS
全站強制 HTTPS，登錄頁 HSTS
  
錯誤信息
統一為「用戶名或密碼錯誤」，不泄露用戶存在性


八、運行效果演示


這套「原生 JS + PHP + PDO + Session」的 AJAX 登錄系統，零第三方依賴、代碼清晰、安全基線達標，可直接作為項目認證模組的起始版本。