SpringMVC 整合 jQuery 傳遞與解析 JSON 資料完整指南

前言

JSON 作為輕量級資料交換格式，已成為前後端分離架構的標準選擇。本文透過完整範例，示範在 SpringMVC 框架下如何使用 jQuery 進行 JSON 物件、陣列的傳遞與解析，涵蓋前端 JSP、後端 Controller 及 JavaBean 對應。

前端實作：JSP 頁面與 jQuery 邏輯

頁面包含三種操作情境：傳送單一 JSON 物件、傳送 JSON 陣列、接收並解析後端回傳的 JSON。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
    <script src="/springMVC6/js/jquery-1.7.2.js"></script>
    <script>
    $(document).ready(function() {
        // 1. 傳送單一 JSON 物件
        $("#resolveJsonObject").click(function() {
            var user = {
                userName: encodeURI($("#userName").val()),
                age: encodeURI($("#age").val())
            };
            $.ajax({
                url: "/springMVC6/user/data/resolveJsonObject",
                data: "orderJson=" + encodeURI(JSON.stringify(user)),
                success: function(data) { console.log("物件傳送成功"); }
            });
        });

        // 2. 傳送 JSON 陣列
        $("#resolveJsonArray").click(function() {
            var user = {
                userName: encodeURI($("#userName").val()),
                age: encodeURI($("#age").val())
            };
            var wrapper = { menu: [user] };
            $.ajax({
                url: "/springMVC6/user/data/resolveJsonArray",
                data: "orderJson=" + encodeURI(JSON.stringify(wrapper)),
                success: function(data) { console.log("陣列傳送成功"); }
            });
        });

        // 3. 接收並解析後端 JSON
        $("#resolveJson").click(function() {
            $.ajax({
                url: "/springMVC6/user/data/resolveJson",
                type: "post",
                success: function(data) {
                    var arr = eval("(" + data + ")"); // 或使用 JSON.parse(data)
                    alert("筆數：" + arr.length);
                    $.each(arr, function(i, item) {
                        alert("使用者：" + item.user.userName);
                    });
                }
            });
        });
    });
    </script>
</head>
<body>
    <h1>JSON 資料傳遞測試</h1>
    姓名：<input id="userName" type="text" name="userName">
    年齡：<input id="age" type="text" name="age"><br>
    <button id="resolveJsonObject">傳送 JSON 物件</button>
    <button id="resolveJsonArray">傳送 JSON 陣列</button>
    <button id="resolveJson">接收解析 JSON</button>
</body>
</html>

後端實作：DataController

使用 net.sf.json 函式庫處理 JSON 解析與生成：

@Controller
@RequestMapping("/user/data")
public class DataController {

    // 解析前端傳來的 JSON 物件
    @RequestMapping("/resolveJsonObject")
    public void resolveJsonObject(HttpServletRequest request, HttpServletResponse response) throws IOException {
        String str = URLDecoder.decode(request.getParameter("orderJson"), "UTF-8");
        JSONObject json = JSONObject.fromObject(str);
        String userName = json.getString("userName");
        System.out.println("接收到 userName：" + userName);
    }

    // 解析前端傳來的 JSON 陣列
    @RequestMapping("/resolveJsonArray")
    public void resolveJsonArray(HttpServletRequest request, HttpServletResponse response) throws IOException {
        String str = URLDecoder.decode(request.getParameter("orderJson"), "UTF-8");
        JSONObject json = JSONObject.fromObject(str);
        JSONArray array = json.getJSONArray("menu");
        JSONObject first = array.getJSONObject(0);
        String userName = first.getString("userName");
        System.out.println("陣列第一筆 userName：" + userName);
    }

    // 回傳 JSON 陣列供前端解析
    @RequestMapping("/resolveJson")
    public void resolveJson(HttpServletRequest request, HttpServletResponse response) throws IOException {
        List<User> list = new ArrayList<>();
        for (int i = 0; i < 10; i++) {
            User u = new User();
            u.setUserName("name_" + i);
            list.add(u);
        }

        JSONArray result = new JSONArray();
        for (User u : list) {
            JSONObject obj = new JSONObject();
            obj.put("user", u);
            result.add(obj);
        }

        response.setContentType("application/json;charset=UTF-8");
        response.getWriter().print(result.toString());
    }

    @RequestMapping("/toJson")
    public String toJson() {
        return "/json";
    }
}

關鍵技術點總結

效能優勢說明

相比傳統序列化物件傳輸，JSON 字串傳輸具備顯著優勢：

• 體積小、解析快，降低頻寬與 CPU 消耗
• 跨語言、跨平台相容性極佳
• 人類可讀，除錯容易
• JavaScript 原生支援，前端處理零負擔

常見坑點提醒

• 中文編碼問題：雙端皆需 encodeURI / URLDecoder.decode 處理
• JSON 格式嚴格：屬性名必須雙引號、無尾隨逗號
• 大量資料傳輸建議改用 POST 並設定 contentType: "application/json"