快捷導航

Springboot中前端向后端傳遞數(shù)據(jù)的幾種方式

更新時間：2025年08月03日 10:19:38 作者：用戶151290545220

在前端和后端的交互中,前端需要向后端傳遞數(shù)據(jù),常見的數(shù)據(jù)傳遞方式包括表單提交、URL參數(shù)、JSON請求等,本文將介紹常見的幾種數(shù)據(jù)傳遞方式,并說明如何在SpringBoot中實現(xiàn)這些方式,需要的朋友可以參考下

在前端和后端的交互中，前端需要向后端傳遞數(shù)據(jù)，常見的數(shù)據(jù)傳遞方式包括表單提交、URL 參數(shù)、JSON 請求等。Spring Boot 作為一種流行的后端開發(fā)框架，提供了多種方式來接收來自前端的數(shù)據(jù)。本文將介紹常見的幾種數(shù)據(jù)傳遞方式，并說明如何在 Spring Boot 中實現(xiàn)這些方式。

1. 表單提交（Form Submission）

最傳統(tǒng)的方式是使用 HTML 表單提交數(shù)據(jù)。Spring Boot 使用 @RequestParam 或 @ModelAttribute 來接收數(shù)據(jù)。

1.1 前端 HTML 表單

<form action="/submitForm" method="POST">
    <input type="text" name="username" />
    <input type="password" name="password" />
    <button type="submit">提交</button>
</form>

1.2 Spring Boot 后端接收表單數(shù)據(jù)

使用 @RequestParam 來接收表單字段數(shù)據(jù)。

@RestController
public class FormController {
    @PostMapping("/submitForm")
    public String handleFormSubmission(@RequestParam String username, @RequestParam String password) {
        return "用戶名: " + username + ", 密碼: " + password;
    }
}

使用 @ModelAttribute 接收整個表單數(shù)據(jù)映射為一個對象。

public class User {
    private String username;
    private String password;
    // getters and setters
}
@RestController
public class FormController {
    @PostMapping("/submitForm")
    public String handleFormSubmission(@ModelAttribute User user) {
        return "用戶名: " + user.getUsername() + ", 密碼: " + user.getPassword();
    }
}

解釋：

@RequestParam 用于從單個表單字段獲取數(shù)據(jù)。
@ModelAttribute 用于將表單數(shù)據(jù)映射到一個對象，適合處理較復雜的數(shù)據(jù)結(jié)構(gòu)。

2. URL 參數(shù)（Query Parameters）

URL 參數(shù)也常用于傳遞數(shù)據(jù)，尤其適合 GET 請求。Spring Boot 可以通過 @RequestParam 來接收 URL 參數(shù)。

2.1 前端請求

<a href="/search?query=SpringBoot&limit=10" rel="external nofollow" >搜索</a>

2.2 Spring Boot 后端接收 URL 參數(shù)

@RestController
public class SearchController {
    @GetMapping("/search")
    public String search(@RequestParam String query, @RequestParam int limit) {
        return "搜索內(nèi)容: " + query + ", 限制條數(shù): " + limit;
    }
}

解釋：

@RequestParam 從 URL 參數(shù)中獲取數(shù)據(jù)。
URL 參數(shù)通常用于 GET 請求，是簡單的數(shù)據(jù)傳遞方式。

3. JSON 請求體（POST 請求）

當需要傳遞結(jié)構(gòu)化數(shù)據(jù)，尤其是復雜的對象時，使用 JSON 格式通過 HTTP POST 請求是最常見的方式。前端通過 AJAX 或 fetch API 發(fā)送 JSON 數(shù)據(jù)，而后端則使用 @RequestBody 來接收 JSON 數(shù)據(jù)并映射為 Java 對象。

3.1 前端發(fā)送 JSON 請求

fetch('/saveUser', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        username: 'john_doe',
        password: '123456'
    })
})
.then(response => response.json())
.then(data => console.log(data));

3.2 Spring Boot 后端接收 JSON 數(shù)據(jù)

public class User {
    private String username;
    private String password;
    // getters and setters
}
@RestController
public class UserController {
    @PostMapping("/saveUser")
    public String saveUser(@RequestBody User user) {
        return "保存用戶: " + user.getUsername() + ", 密碼: " + user.getPassword();
    }
}

解釋：

@RequestBody 注解將請求體中的 JSON 數(shù)據(jù)轉(zhuǎn)換為對應(yīng)的 Java 對象。
適用于需要傳遞復雜數(shù)據(jù)結(jié)構(gòu)或?qū)ο蟮膱鼍啊?/li>

4. 文件上傳（Multipart/Form-Data）

前端可以通過表單提交文件，Spring Boot 提供了對文件上傳的支持，可以通過 @RequestParam 或 @ModelAttribute 來接收文件。

4.1 前端文件上傳表單

<form action="/upload" method="POST" enctype="multipart/form-data">
    <input type="file" name="file" />
    <button type="submit">上傳文件</button>
</form>

4.2 Spring Boot 后端接收文件

import org.springframework.web.multipart.MultipartFile;
@RestController
public class FileUploadController {
    @PostMapping("/upload")
    public String uploadFile(@RequestParam MultipartFile file) {
        String fileName = file.getOriginalFilename();
        return "上傳文件名: " + fileName;
    }
}

解釋：

enctype="multipart/form-data" 必須設(shè)置在 HTML 表單中，才能上傳文件。
@RequestParam MultipartFile 用于接收前端上傳的文件。

5. Path Variables（路徑變量）

有時，數(shù)據(jù)作為路徑的一部分傳遞，這種情況通常是通過 URL 路徑來傳遞數(shù)據(jù)。Spring Boot 可以通過 @PathVariable 接收路徑參數(shù)。

5.1 前端請求

<a href="/user/john_doe" rel="external nofollow" >查看用戶</a>

5.2 Spring Boot 后端接收路徑參數(shù)

@RestController
public class UserController {
    @GetMapping("/user/{username}")
    public String getUser(@PathVariable String username) {
        return "用戶: " + username;
    }
}

解釋：

@PathVariable 用于接收 URL 路徑中的數(shù)據(jù)。
適用于資源標識符或其他動態(tài)路徑數(shù)據(jù)傳遞。

6. Cookies 和 Headers

在某些情況下，前端也可以通過 HTTP 頭或 Cookies 傳遞數(shù)據(jù)。Spring Boot 可以通過 @RequestHeader 或 @CookieValue 獲取頭部信息或 Cookie。

6.1 前端發(fā)送請求帶 Header

fetch('/api/user', {
    method: 'GET',
    headers: {
        'Authorization': 'Bearer your-token'
    }
})
.then(response => response.json())
.then(data => console.log(data));

6.2 Spring Boot 后端接收 Header

@RestController
public class ApiController {
    @GetMapping("/api/user")
    public String getUser(@RequestHeader("Authorization") String authorization) {
        return "Authorization Header: " + authorization;
    }
}

6.3 前端發(fā)送請求帶 Cookie

fetch('/api/user', {
    method: 'GET',
    credentials: 'include'  // 允許帶 Cookie
})
.then(response => response.json())
.then(data => console.log(data));

6.4 Spring Boot 后端接收 Cookie

@RestController
public class ApiController {
    @GetMapping("/api/user")
    public String getUser(@CookieValue("user_id") String userId) {
        return "用戶ID: " + userId;
    }
}

解釋：