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

时间:2024-10-19 16:22:26

目录

一、概述

二、查询参数

三、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.使用场景

  • 适用于 POSTPUTPATCH 等需要在请求体中发送数据的请求

  • 传递结构化的数据,如对象、数组

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