您现在的位置：程式碼之家 >> 編程語言 > >> Java 程式設計 >> Java 綜合教學

前端 JS 陣列對象傳遞給後端：JSON.stringify + AJAX 完整實現與後端接收解析

編輯：Java 綜合教學

場景

前端需要將一組對象數據（如表單列表、購物車商品、批量操作 ID）通過 AJAX 發送到後端，後端解析為 List/數組進行業務處理。核心方案：**前端 JSON.stringify 序列化為字符串 → 後端反序列化為集合**。

一、前端完整代碼 (jQuery AJAX)

// 1. 構建對象數組
var conditions = [];

var item1 = { name: "商品A", id: "1001", price: 99.9 };
var item2 = { name: "商品B", id: "1002", price: 149.5 };

conditions.push(item1);
conditions.push(item2);

// 2. 發送 AJAX 請求
$(function () {
    $.ajax({
        async: false,           // 同步請求（演示用，生產建議 true 異步）
        type: 'POST',
        url: '/api/batch-process',  // 後端接口地址
        data: {
            batchName: "2024促銷批次",      // 普通參數
            conditions: JSON.stringify(conditions)  // 關鍵：對象數組序列化為 JSON 字符串
        },
        dataType: 'json',       // 預期響應類型
        success: function (resp) {
            console.log("後端返回:", resp);
            if (resp.success) {
                alert("處理成功，影響行數: " + resp.data);
            }
        },
        error: function (xhr, status, err) {
            console.error("請求失敗:", status, err);
            alert("系統異常，請稍後重試");
        }
    });
});

關鍵點說明

點	說明
`JSON.stringify(conditions)`	將 JS 對象/數組轉為 JSON 格式字符串，如 `'[{"name":"商品A","id":"1001"},{"name":"商品B","id":"1002"}]'`。後端接收到的是普通表單字段，值為該字符串。
`data` 格式	jQuery 默認 `application/x-www-form-urlencoded`，會自動將對象鍵值對編碼為 `batchName=...&conditions=...`，`conditions` 值已被編碼（特殊字符轉義）。
Content-Type	若後端要求 `application/json` 整體發送，需設置 `contentType: 'application/json;charset=UTF-8'` 並將整個 data 對象 `JSON.stringify`，但這屬於另一種模式（請求體直接是 JSON），本文專講表單字段嵌入 JSON 字符串模式。

二、後端接收與解析 (Spring MVC / Servlet)

1. Spring MVC Controller 方式（推薦）

@RestController
@RequestMapping("/api")
public class BatchController {

    @PostMapping("/batch-process")
    public Result batchProcess(
            @RequestParam String batchName,
            @RequestParam String conditions  // 直接接收 JSON 字符串
    ) {
        // 1. 解析 JSON 字符串為 List 或 實體類 List
        List conditionList = JSON.parseArray(conditions, ConditionDTO.class);
        // 或使用 Jackson: objectMapper.readValue(conditions, new TypeReference>(){});

        // 2. 業務處理
        int affected = batchService.process(batchName, conditionList);

        return Result.success(affected);
    }

    // 內部 DTO
    @Data
    public static class ConditionDTO {
        private String name;
        private String id;
        private Double price;
    }
}

2. 原生 Servlet 方式（無框架）

@WebServlet("/api/batch-process")
public class BatchServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        req.setCharacterEncoding("UTF-8");
        String batchName = req.getParameter("batchName");
        String conditionsJson = req.getParameter("conditions");

        // 解析：這裡用 json-lib (舊項目常見) 或 Jackson/Gson
        // json-lib 方式：
        JSONArray jsonArray = JSONArray.fromObject(conditionsJson);
        List list = (List) JSONArray.toCollection(jsonArray, Condition.class);

        // Jackson 方式（現代推薦）：
        // ObjectMapper mapper = new ObjectMapper();
        // List list = mapper.readValue(conditionsJson, new TypeReference>(){});

        int affected = BatchService.process(batchName, list);

        resp.setContentType("application/json;charset=UTF-8");
        resp.getWriter().write("{\"success\":true,\"data\":" + affected + "}");
    }
}

三、常用 JSON 庫對比與依賴

庫	Maven 坐標	核心類/方法	優勢
Jackson	`com.fasterxml.jackson.core:jackson-databind`	`ObjectMapper.readValue(json, TypeReference)`	性能最強、Spring Boot 默認、功能最全
Gson	`com.google.code.gson:gson`	`new Gson().fromJson(json, new TypeToken>(){}.getType())`	API 簡潔、無依賴、Android 常用
Fastjson	`com.alibaba:fastjson`	`JSON.parseArray(json, T.class)`	國產、語法極簡、舊項目多用
json-lib	`net.sf.json-lib:json-lib`	`JSONArray.fromObject(json)`	老牌、僅維護舊項目

四、進階：直接發送 JSON Body（RESTful 風格）

若後端接口定義為 @RequestBody List conditions，前端需調整：

$.ajax({
    type: 'POST',
    url: '/api/batch-process',
    contentType: 'application/json;charset=UTF-8',  // 關鍵
    data: JSON.stringify({                          // 整個請求體序列化
        batchName: "2024促銷批次",
        conditions: conditions
    }),
    dataType: 'json',
    success: ...
});

後端對應：

@PostMapping("/batch-process")
public Result batchProcess(@RequestBody BatchRequest request) {
    // request.getConditions() 直接是 List
}

五、總結

表單嵌入模式：data: { key: JSON.stringify(arr) } + 後端 @RequestParam String 解析，適合兼容舊接口、文件上傳混合場景。
JSON Body 模式：contentType: 'application/json' + data: JSON.stringify(obj) + 後端 @RequestBody，適合純 REST API、結構複雜對象。
**後端統一推薦 Jackson**，性能最佳、生態最完善。
**前端務必設置 charset=UTF-8**，避免中文亂碼。