目录
一、概述
在 Web 开发中,前端需要与后端服务器进行数据交互,常见的方式是通过 HTTP 请求发送数据给后端。
本文章将介绍以下几种常用的请求参数传递方式:
- Query 参数
- JSON 格式参数
application/x-www-form-urlencoded
multipart/form-data
其中,Query 参数是URL 中的查询参数,剩余三种都是请求体中的参数。
二、查询参数
查询参数是附加在 URL 末尾的键值对,用于在 GET 请求中传递参数,以问号 ?
开始,多个参数之间用 &
分隔。
1.使用场景
-
适用于 GET 请求
-
传递非敏感数据,如搜索关键词、分页信息、过滤条件等
2.使用方法
示例:
js
// 假设要发送 GET 请求到 /api/users?page=1&size=10
axios.get('/api/users', {
//params 对象:用于指定查询参数,Axios 会自动将其转换为查询字符串附加到 URL 后面。
params: {
page: 1,
size: 10
}
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
3.后端接收
java
@GetMapping("/api/users")
public ResponseEntity<List<User>> getUsers(
//@RequestParam:用于获取查询参数。
@RequestParam("page") int page,
@RequestParam("size") int size) {
// 处理逻辑
}
三、JSON格式参数
1.使用场景
-
适用于 POST 、PUT 、PATCH 等需要在请求体中发送数据的请求
-
传递结构化的数据,如对象、数组
2.使用方法
js
// 发送 POST 请求到 /api/users,发送 JSON 数据
// 默认情况下,Axios 会将对象序列化为 JSON,并设置 Content-Type: application/json
axios.post('/api/users', {
name: '张三',
email: 'zhangsan@example.com'
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
3.后端接收
java
@PostMapping("/api/users")
//@RequestBody:用于将请求体中的 JSON 数据反序列化为对应的对象。
public ResponseEntity<User> createUser(@RequestBody User user) {
// 处理逻辑
}
四、x-www-form-urlencoded
application/x-www-form-urlencoded
是一种常见的 MIME 类型,用于提交 HTML 表单数据。数据以键值对的形式编码,键和值都经过 URL 编码,并以 &
分隔。
1. 使用场景
- 提交 表单数据
- 兼容性好,后端容易解析
2.使用方法
js
// 使用 URLSearchParams 构建数据
const params = new URLSearchParams();
params.append('username', 'zhangsan');
params.append('password', '123456');
axios.post('/api/login', params)
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
3.后端接收
java
@PostMapping("/api/login")
public ResponseEntity<?> login(
@RequestParam("username") String username,
@RequestParam("password") String password) {
// 处理逻辑
}
五、multipart/form-data
multipart/form-data
是一种 MIME 类型,允许在一个 HTTP 请求中包含多部分数据,每部分可以是不同的类型。常用于文件上传。
1.使用场景
-
文件上传
-
需要传递二进制数据,如图像、文档等
2.使用方法
js
const formData = new FormData();
formData.append('name', '张三');
formData.append('avatar', fileInput.files[0]); // 假设有一个文件输入框
axios.post('/api/upload', formData)
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
3.后端接收
java
@PostMapping("/api/upload")
public ResponseEntity<?> uploadFile(
@RequestParam("name") String name,
@RequestPart("avatar") MultipartFile file) {
// 处理逻辑
}