PHP AJAX 登入系統完整實作：前端異步驗證、後端 JSON 回應、驗證碼整合與資料庫操作封裝

PHP + AJAX 異步登入系統完整實戰：從前端交互到後端驗證的端到端實作

傳統表單提交跳轉體驗差，AJAX 登入可在頁面內完成驗證並給予即時反饋。本文提供完整代碼：登入頁面、JS 異步請求、後端驗證邏輯、資料庫操作類封裝。

系統架構

login.php      # 登入頁面 (HTML + JS)
ajaxhelper.js  # XMLHttpRequest 封裝 (相容 IE6+)
dologin.php    # 後端驗證入口 (回傳 JSON)
conn.php       # 資料庫連接配置
Users.php      # 用戶 CRUD 封裝類 (備用)

1. 登入頁面 (login.php) 核心邏輯

<?php session_start(); ?>
<!DOCTYPE html>
<html><head><meta charset="gb2312"><title>AJAX 登入</title>
<script src="JS/ajaxhelper.js"></script>
<script src="JS/jquery-1.3.2.min.js"></script>
<script>
function chkForm() {
    var user = $('#username').val(), pwd = $('#password').val(), code = $('#txtCode').val();
    if (!user || !pwd || !code) return alert('請填寫完整');

    $.post('dologin.php', {username: user, password: pwd, code: code}, function(res) {
        var obj = JSON.parse(res);
        if (obj.result) {
            alert('提示：' + obj.info);
            location.href = 'index.php';
        } else {
            alert('錯誤：' + obj.info);
        }
    });
}

// 刷新驗證碼
function changeCode() {
    $('#imgCode').attr('src', 'function/imagecode.php?d=' + Date.now());
}
</script>
</head><body>
<form>
  用戶名：<input id="username"><br>
  密碼：<input type="password" id="password"><br>
  驗證碼：<input id="txtCode" size="12">
  <img id="imgCode" src="function/imagecode.php">
  <button type="button" onclick="changeCode()">換一張</button><br>
  <button type="button" class="btnlogin" onclick="chkForm()">登入</button>
  <span id="loading"></span>
</form>
</body></html>

2. 後端驗證 (dologin.php)

<?php
session_start();
header("Content-Type: application/json; charset=gb2312");

$name = $_POST['username'];
$pwd  = $_POST['password'];
$code = $_POST['code'];

// 1. 驗證碼檢查
if (strtoupper($code) != $_SESSION["code"]) {
    die(json_encode(['result'=>false, 'info'=>'驗證碼錯誤!']));
}

// 2. 資料庫查詢
include("conn/conn.php");
$sql = "SELECT studentName, studentPwd FROM tbstudent WHERE studentId='$name'";
$res = mysql_query($sql, $conn);
if ($row = mysql_fetch_assoc($res)) {
    if ($pwd == $row['studentPwd']) {
        $_SESSION['username'] = $row['studentName'];
        die(json_encode(['result'=>true, 'info'=>'登陸成功!']));
    } else {
        die(json_encode(['result'=>false, 'info'=>'密碼錯誤!']));
    }
} else {
    die(json_encode(['result'=>false, 'info'=>'該用戶不存在!']));
}

3. 資料庫連接 (conn.php)

<?php
$conn = mysql_connect("localhost", "root", "");
mysql_select_db("bbs", $conn);
mysql_query("SET NAMES GB2312");

4. 用戶操作類封裝 (Users.php) - 完整 CRUD 參考

<?php
class Users {
    function checkLogin($username, $userpwd) {
        // 使用 md5 加密密碼
        $sql = "SELECT userid FROM tbuser WHERE username='$username' AND userpwd='" . md5(trim($userpwd)) . "'";
        // ... 執行並回傳結果
    }
    function AddUser($name, $pwd) { /* INSERT */ }
    function DeleteUser($name) { /* DELETE */ }
    function UpdateUser($id, $name, $pwd) { /* UPDATE */ }
}

運行效果

關鍵最佳實踐總結

現代化重寫方向 (jQuery 3.x + PHP 7+)

• 前端：fetch API 或 axios 替代 jQuery AJAX
• 後端：PDO 預處理語句防注入、json_encode 統一輸出
• 驗證碼：接入 reCAPTCHA v3 或行為分析型無感驗證
• Session：Redis 集群儲存支援分散式部署