几种HTTP请求参数的简单介绍

一、概述

在 Web 开发中，前端需要与后端服务器进行数据交互，常见的方式是通过 HTTP 请求发送数据给后端。

本文章将介绍以下几种常用的请求参数传递方式：

Query 参数
JSON 格式参数
application/x-www-form-urlencoded
multipart/form-data

其中，Query 参数是URL 中的查询参数，剩余三种都是请求体中的参数。

二、查询参数

查询参数是附加在 URL 末尾的键值对，用于在 GET 请求中传递参数，以问号 ? 开始，多个参数之间用 & 分隔。

1.使用场景

适用于 GET 请求
传递非敏感数据，如搜索关键词、分页信息、过滤条件等

2.使用方法

示例：

// 假设要发送 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.后端接收

@GetMapping("/api/users")
public ResponseEntity<List<User>> getUsers(//@RequestParam：用于获取查询参数。@RequestParam("page") int page,@RequestParam("size") int size) {// 处理逻辑
}

三、JSON格式参数

1.使用场景

适用于 POST、PUT、PATCH 等需要在请求体中发送数据的请求
传递结构化的数据，如对象、数组

2.使用方法

// 发送 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.后端接收

@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.使用方法

// 使用 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.后端接收

@PostMapping("/api/login")
public ResponseEntity<?> login(@RequestParam("username") String username,@RequestParam("password") String password) {// 处理逻辑
}

五、multipart/form-data

multipart/form-data 是一种 MIME 类型，允许在一个 HTTP 请求中包含多部分数据，每部分可以是不同的类型。常用于文件上传。

1.使用场景

文件上传
需要传递二进制数据，如图像、文档等

2.使用方法

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.后端接收

@PostMapping("/api/upload")
public ResponseEntity<?> uploadFile(@RequestParam("name") String name,@RequestPart("avatar") MultipartFile file) {// 处理逻辑
}