jQuery Ajax 獲取數據庫數據完整流程：前端請求 → 後端接口 → 數據庫查詢

完整架構圖解

瀏覽器 (JS/Ajax) 
    │ HTTP GET/POST + 參數
    ▼
Web 服務器 (Java/PHP/Node/C# 接口)
    │ SQL 查詢
    ▼
數據庫 (MySQL/Oracle...)
    │ 結果集
    ▼
Web 服務器 (封裝為 JSON)
    │ HTTP Response (JSON)
    ▼
瀏覽器 (JS 解析 JSON 更新 DOM)

前端 Ajax 代碼範例

$.ajax({
    url: '/api/user/login',        // 後端接口地址
    type: 'POST',                  // 提交方式
    data: {                        // 參數 (自動編碼為 application/x-www-form-urlencoded)
        username: $('#user').val(),
        password: $('#pwd').val()
    },
    dataType: 'json',              // 預期響應類型
    success: function(resp) {      // 成功回調
        if (resp.code === 200) {
            $('#welcome').text('歡迎 ' + resp.data.username);
        } else {
            alert('登入失敗: ' + resp.msg);
        }
    },
    error: function(xhr, status, err) {
        console.error('請求異常:', err);
    }
});

後端接口職責 (以 Java Servlet 為例)

1. 接收請求參數 request.getParameter()。
2. 調用 Service/DAO 查詢數據庫。
3. 將結果封裝為對象/Map。
4. 使用 Gson/Jackson 序列化為 JSON：response.getWriter().write(new Gson().toJson(result))。
5. 設置響應頭：response.setContentType("application/json;charset=UTF-8")。

關鍵點總結

• **Ajax 只負責「發請求、收響應、更新頁面」**，不直接連數據庫。
• **數據庫訪問必須在後端完成**，前端無法也不應直接連 DB。
• 接口規範：統一返回結構 {code, msg, data}，前端據此判斷業務邏輯。