jQuery AJAX 與 Servlet 參數傳遞：JSON 與表單格式對比

錯誤示範

// 前端：手動拼接 JSON 字符串
var param = '{"username":"' + username + '","pwd":"' + pwd + '"}';
$.ajax({ type: 'post', url: 'MyServlet', data: param, ... });

// 後端：試圖用 getParameter("param") 獲取
String aa = request.getParameter("param"); // 為 null

原因：data: param 發送的是 application/x-www-form-urlencoded 格式（預設），但內容是 JSON 字符串，Servlet 解析不到名為 "param" 的參數。

正確方案一：發送標準表單數據

// 方式 A：對象自動序列化
$.ajax({
    type: 'post',
    url: 'MyServlet',
    data: { username: username, pwd: pwd }, // jQuery 自動轉為 username=xxx&pwd=yyy
    success: ...
});

// 方式 B：手動拼接查詢字符串
data: "username=" + encodeURIComponent(username) + "&pwd=" + encodeURIComponent(pwd)

// Servlet 正常獲取
String username = request.getParameter("username");
String pwd = request.getParameter("pwd");

正確方案二：發送 JSON（需後端配合）

// 前端：指定 contentType
$.ajax({
    type: 'post',
    url: 'MyServlet',
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify({ username: username, pwd: pwd }),
    success: ...
});

// 後端：讀取請求體輸入流解析 JSON
BufferedReader reader = request.getReader();
StringBuilder sb = new StringBuilder();
String line;
while ((line = reader.readLine()) != null) sb.append(line);
JSONObject json = new JSONObject(sb.toString());
String username = json.getString("username");

對比總結

最佳實踐

• 優先使用對象字面量 data: {key: val}，讓 jQuery 自動處理編碼與序列化。
• 後端統一用 @RequestParam (Spring) 或 getParameter 接收表單字段。
• 涉及數組/集合時，前端傳 ids=1&ids=2，後端用 getParameterValues("ids")。