JSP/Ajax 處理類 JSON 陣列數據：後台構建標準 JSON 避免前端解析麻煩

問題

後台返回格式 [['和平區',129],['皇姑區',62]]，**非標準 JSON**（標準應為 [["和平區",129],["皇姑區",62]] 或對象數組）。JSP <%= %> 輸出時中括號被解析丟失，Ajax 無法直接 JSON.parse。

根本原因

後台拼接字符串時未按 JSON 標準序列化（單引號、無雙引號包裹鍵/字符串值）。

解決方案：後台直接輸出標準 JSON（推薦）

Java 後台用 Jackson/Gson 序列化

// Controller / Servlet
List> data = new ArrayList<>();
data.add(Arrays.asList("和平區", 129));
data.add(Arrays.asList("皇姑區", 62));

// Jackson
ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(data);
// 结果: [["和平區",129],["皇姑區",62]]

response.setContentType("application/json;charset=UTF-8");
response.getWriter().write(json);

前端 Ajax 直接解析

$.getJSON('/api/areas', function(arr) {
    // arr 為陣列: [["和平區",129], ["皇姑區",62]]
    arr.forEach(item => {
        console.log(item[0], item[1]); // 名稱、值
        $('#sel').append(`${item[0]}`);
    });
});

若無法改後台：前端修正字符串再解析（權宜）

// 原始響應文本: "[['和平區',129],['皇姑區',62]]"
let raw = responseText
    .replace(/'/g, '"')           // 單引號 → 雙引號
    .replace(/(\w+):/g, '"$1":'); // 鍵加雙引號（若有鍵）
// 現在為標準 JSON，可 JSON.parse
let data = JSON.parse(raw);

方案對比

最佳實踐原則

1. **契約優先**：雙方約定 JSON 格式，後台用庫序列化，前端用庫反序列化。
2. **Content-Type**: 後台必須設置 application/json;charset=UTF-8，避免瀏覽器誤判。
3. **統一異常格式**: {"code":0,"msg":"ok","data":[]}，前端統一攔截處理。

核心觀點：**別在前端寫字符串處理邏輯去修補後台的非標準輸出**，源頭修正才是正道。