AJAX 請求 Servlet 返回 JSON 資料的正確姿勢與常見坑點

問題現象

• 前端 $.ajax 請求 Servlet
• Servlet 使用 out.print 輸出 JSON 字串
• 前端 success 回調不執行，進入 error 回調
• 手動 eval 解析也失敗

核心問題：JSON 格式不標準

jQuery 1.4+ 版本嚴格要求 dataType: "json" 時，回應必須是標準 JSON 格式，否則不觸發 success 回調。

錯誤 vs 正確對比

❌ Servlet 輸出錯誤示例

// 錯誤 1: 單引號而非雙引號
out.print("[{'Cno':'C001','Cth1':'Chapter1'}]");

// 錯誤 2: 尾隨逗號
out.print("[{\"Cno\":\"C001\",\"Cth1\":\"Chapter1\",}]");

// 錯誤 3: 非陣列非物件
out.print("{\"Cno\":\"C001\",\"Cth1\":\"Chapter1\"}"); // 但前端當陣列處理

✅ 標準 JSON 輸出

// 正確：雙引號、無尾隨逗號、正確結構
out.print("[{\"Cno\":\"C001\",\"Cth1\":\"Chapter1\"}]");
// 或使用 JSON 庫生成 (推薦)

完整正確實現

前端代碼

$.ajax({
    type: "POST",
    url: "ShowDetail",
    data: { Cno: Cno },  // 使用 data 物件，避免手動拼接 URL
    dataType: "json",    // 關鍵：告訴 jQuery 期望標準 JSON
    success: function(data) {
        // data 已自動解析為 JS 物件/陣列
        if (data && data.length > 0) {
            console.log("第一筆 Cth1:", data[0].Cth1);
            // 處理資料...
        }
    },
    error: function(xhr, status, error) {
        console.error("AJAX 請求失敗:", status, error);
        console.error("回應內容:", xhr.responseText);
    }
});

後端 Servlet (使用 Jackson/Gson 庫)

@WebServlet("/ShowDetail")
public class ShowDetailServlet extends HttpServlet {
    private ObjectMapper mapper = new ObjectMapper(); // Jackson

    protected void doPost(HttpServletRequest req, HttpServletResponse resp) 
            throws ServletException, IOException {
        
        String cno = req.getParameter("Cno");
        // 模擬資料查詢
        CourseDetail cd = courseService.findByCno(cno);
        
        // 設定回應標頭 (關鍵！)
        resp.setContentType("application/json;charset=UTF-8");
        resp.setCharacterEncoding("UTF-8");
        
        // 使用 JSON 庫序列化 (避免手動拼接錯誤)
        String json = mapper.writeValueAsString(cd);
        resp.getWriter().write(json);
    }
}

Maven 依賴 (Jackson)

<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.15.2</version>
</dependency>

常見坑點總結表

進階：統一回應格式

// 定義統一回應類
public class ApiResponse<T> {
    private int code;      // 200 成功，其他失敗
    private String message;
    private T data;
    // getter/setter...
}

// Servlet 中使用
ApiResponse<CourseDetail> response = new ApiResponse<>();
response.setCode(200);
response.setData(cd);
resp.getWriter().write(mapper.writeValueAsString(response));

// 前端處理
success: function(res) {
    if (res.code === 200) {
        console.log(res.data.Cth1);
    } else {
        alert("錯誤: " + res.message);
    }
}

除錯技巧

1. 瀏覽器 Network 面板：檢查 Request/Response 標籤，確認回應內容與 Content-Type
2. 線上 JSON 驗證：複製回應內容到 jsonlint.com 驗證
3. 後端日誌：記錄序列化後的 JSON 字串，確認格式
4. 前端 console.log：在 error 回調中印出 xhr.responseText

總結

AJAX 請求 Servlet 返回 JSON 的核心原則：後端使用成熟 JSON 庫序列化 + 設定正確 Content-Type，前端信任 jQuery 自動解析。拒絕手動拼接 JSON 字串，這是 90% 問題的根源。