Java 後端與前端 Ajax 透過 JSON 交換資料實作

Java Spring MVC 回傳 JSON 資料給前端 Ajax 完整範例

前後端分離架構下，JSON 是最主流的資料交換格式。本文示範 Spring MVC 後端如何序列化物件為 JSON，搭配 jQuery Ajax 非同步接收並渲染。

前端：jQuery Ajax 請求

$.ajax({
    type: "POST",
    url: "apply/mystudent.action",
    cache: false,
    dataType: "json",  // 關鍵：指定回應格式為 JSON
    success: function(data) {
        // data 為 JSON 陣列：[{"number":"V006","names":"LiLei"}]
        $.each(data, function(index, item) {
            alert("姓名：" + item.names);
            alert("學號：" + item.number);
        });
    },
    error: function(xhr, status, error) {
        console.error("請求失敗：" + error);
    }
});

關鍵設定： dataType: "json" 讓 jQuery 自動解析回應為 JavaScript 物件/陣列。

後端 Action 處理

public String mystudent() throws Exception {
    List<Student> list = priceService.query();  // 查詢資料
    this.jsonUtil(list);  // 序列化並輸出 JSON
    return null;  // 已手動輸出回應，不需視圖解析
}

JSON 序列化工具方法

public void jsonUtil(Object data) throws Exception {
    HttpServletResponse response = ServletActionContext.getResponse();
    String jsonStr = JsonConvert.toJson(data);
    
    response.setCharacterEncoding("UTF-8");
    response.setContentType("application/json; charset=UTF-8");
    response.getWriter().write(jsonStr);
}

Jackson JSON 轉換工具類

import java.io.StringWriter;
import com.fasterxml.jackson.databind.ObjectMapper;

public class JsonConvert {
    private static final ObjectMapper mapper = new ObjectMapper();
    
    public static String toJson(Object obj) throws Exception {
        StringWriter writer = new StringWriter();
        mapper.writeValue(writer, obj);
        return writer.toString();
    }
    
    // 反序列化範例
    public static <T> T fromJson(String json, Class<T> clazz) throws Exception {
        return mapper.readValue(json, clazz);
    }
}

依賴套件： 採用 Jackson (jackson-databind)，現代 Java 專案標準 JSON 函式庫。

Student 實體類別

public class Student {
    private String number;
    private String names;
    
    // Getter/Setter 省略
    // Jackson 透過 Getter 序列化屬性名稱
}

完整資料流向

1. 前端發送 Ajax POST 請求至 /apply/mystudent.action
2. Struts2/Spring MVC 導向 mystudent() 方法
3. Service 層查詢資料庫回傳 List<Student>
4. jsonUtil() 使用 Jackson 將 List 序列化為 JSON 字串
5. 直接寫入 HttpServletResponse 輸出流
6. 前端 success 回呼接收解析後的 JavaScript 陣列
7. $.each() 迭代渲染資料

常見問題與解決

現代化建議

• Spring MVC 專案建議使用 @RestController + @ResponseBody 自動序列化
• Spring Boot 專案僅需引入 spring-boot-starter-web 即內建 Jackson
• 大量資料考慮分頁或串流輸出，避免記憶體壓力