您现在的位置：程式碼之家 >> 編程語言 > >> Java 程式設計 >> Java 相關知識

Spring MVC 前後端資料交互完整指南

編輯：Java 相關知識

控制器角色定位

Spring MVC 控制器（Controller）是表現層核心，職責單一：

接收前端請求參數（表單、JSON、路徑變數、請求頭）
委派業務邏輯給 Service 層處理
返回視圖名稱或直接回應資料（REST 風格）

本質上是 Servlet 的封裝升級，以方法級映射取代傳統 Servlet 類級映射，大幅提升開發效率。

請求映射與參數接收

基礎映射

表單參數自動綁定

方法參數名**必須與表單 input name 完全一致**（反射機制）。

@RequestMapping("/login")
public String login(String username, String password) {
    System.out.println(username + " " + password);
    return "form.jsp";  // 視圖解析器拼接 prefix/suffix
}

視圖解析器配置

<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    <property name="prefix" value="/WEB-INF/views/" />
    <property name="suffix" value=".jsp" />
</bean>

返回 "login" → 解析為 /WEB-INF/views/login.jsp。

物件綁定（命令物件/表單後端物件）

後端 Bean 定義

public class User {
    private String username;
    private String password;
    // 標準 getter/setter（必須！Spring 靠 setter 注入）
}

控制器直接接收物件

@RequestMapping(value="/model", method=RequestMethod.POST)
public String loginModel(User user) {
    System.out.println(user.getUsername() + " " + user.getPassword());
    return "form.jsp";
}

Spring 自動實例化 User 並逐屬性綁定請求參數（username=xxx&password=yyy）。

JSON 資料交互（AJAX/前後端分離核心）

前端發送 JSON

<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#btnSubmit").click(function(){
        // serializeArray() 產生 [{name:"username",value:"..."}, ...]
        var params = $("#userForm").serializeArray();
        console.log(params);
        
        $.ajax({
            type: "POST",
            url: "model",
            data: params,  // jQuery 自動轉 application/x-www-form-urlencoded
            success: function(resp) { console.log("成功"); }
        });
    });
});
</script>

<form id="userForm">
    <input name="username" type="text"/><br/>
    <input name="password" type="password"/><br/>
</form>
<button id="btnSubmit">提交</button>

後端接收 JSON（需 `@RequestBody` + Jackson）

@RequestMapping(value="/json", method=RequestMethod.POST)
@ResponseBody
public String jsonEndpoint(@RequestBody User user) {
    // Content-Type: application/json 時自動反序列化
    return "received: " + user.getUsername();
}

JSON交互示意

關鍵註解速查表

註解	用途	典型場景
`@RequestMapping`	請求 URL 映射	類上定義基礎路徑，方法上定義具體端點
`@GetMapping` / `@PostMapping`	HTTP 方法限定的映射	REST 風格替代 `@RequestMapping(method=...)`
`@RequestParam`	綁定查詢參數/表單欄位	`@RequestParam("id") Long id`，可設 `required=false`, `defaultValue`
`@PathVariable`	綁定路徑變數	`@GetMapping("/user/{id}") public User get(@PathVariable Long id)`
`@RequestBody`	綁定請求體	JSON/XML 反序列化為物件
`@ResponseBody`	方法返回值直接寫入回應體	REST API 返回 JSON，配合 Jackson 自動序列化
`@RestController`	`@Controller + @ResponseBody`	全類別方法預設返回資料而非視圖
`@ModelAttribute`	綁定模型屬性	表單回顯、跨請求共享資料

資料流向總結圖

前端 (瀏覽器/APP)
    │
    ▼ HTTP Request (參數/JSON/路徑)
DispatcherServlet
    │
    ▼ 參數解析器 (HandlerMethodArgumentResolver)
    ├─ String/基本型別 → @RequestParam
    ├─ POJO → 自動實例化 + setter 綁定
    ├─ JSON → HttpMessageConverter (Jackson) → @RequestBody
    └─ 路徑變數 → @PathVariable
    │
    ▼ Controller 方法執行
    │
    ▼ 返回值處理
    ├─ String (視圖名) → ViewResolver → JSP/Thymeleaf
    ├─ ModelAndView → 視圖 + 模型
    ├─ @ResponseBody 物件 → HttpMessageConverter → JSON
    └─ void → 自行寫入 HttpServletResponse
    │
    ▼ HTTP Response

常見問題與解決方案

問題	原因	解決
參數為 null	參數名不匹配、缺少 setter、Content-Type 錯誤	檢查 name 一致性、補全 getter/setter、設定正確 Content-Type
400 Bad Request (JSON)	JSON 格式錯誤、欄位型別不符、缺少 Jackson 依賴	驗證 JSON 格式、對應 DTO 定義、引入 `jackson-databind`
中文亂碼	編碼不一致	配置 `CharacterEncodingFilter`、Tomcat `URIEncoding=UTF-8`、DB 連線編碼
日期綁定失敗	格式不匹配	`@DateTimeFormat(pattern="yyyy-MM-dd")` 或全域配置 `spring.mvc.date-format`

總結

Spring MVC 資料交互核心在於**參數名匹配**、**型別轉換**、**HTTP 訊息轉換**三大機制。掌握 @RequestParam、@PathVariable、@RequestBody、@ResponseBody 四大註解組合，配合 @RestController 簡化 REST 開發，即可應對 90% 以上前後端交互場景。JSON 為現代主流格式，建議統一採用 application/json + DTO 模式，搭配參數校驗（@Valid + JSR-303）構建健壯 API。