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

目录

一、概述

二、查询参数

三、JSON格式参数

四、x-www-form-urlencoded

五、multipart/form-data

一、概述

在 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) {
    // 处理逻辑
}