前端发送请求时，参数的传递格式

在前端与后端进行数据交互时，参数的传递格式根据请求类型（GET/POST等）、数据复杂度和业务需求的不同而有所区别。

一、URL查询参数（Query Parameters）

适用场景 ：GET请求为主，用于传递简单的键值对参数（如筛选条件、分页信息）。
格式特点 ：参数附加在URL末尾，以?开头，多个参数用&分隔，键值对用=连接。
示例：

复制代码

https://api.example.com/users?page=1&size=10&status=active

特点：

可见性高（暴露在URL中），不适合传递敏感信息。
有长度限制（不同浏览器/服务器限制不同，通常建议不超过2048字符）。
只能传递字符串类型，复杂数据（如对象、数组）需要序列化（如JSON.stringify后encodeURIComponent）。

前端示例（JavaScript）：

javascript 复制代码

// 使用URLSearchParams构建
const params = new URLSearchParams();
params.append('page', 1);
params.append('size', 10);
fetch(`https://api.example.com/users?${params}`);

// 复杂参数序列化
const filter = { status: 'active', roles: ['admin', 'user'] };
const query = new URLSearchParams({
  filter: encodeURIComponent(JSON.stringify(filter))
});
fetch(`https://api.example.com/users?${query}`);

二、表单数据（Form Data）

适用场景 ：POST请求为主，用于提交表单数据（如用户注册、文件上传）。
格式分类：

application/x-www-form-urlencoded
- 最常见的表单格式，参数以键值对形式编码，类似URL查询参数，但放在请求体中。
- 示例请求体：username=john&password=123&hobby=reading&hobby=sports
- 特点：只能传递字符串，数组会被转为多个同名键值对。

multipart/form-data

用于上传文件或二进制数据，也支持普通键值对。
格式会添加分隔符（boundary）区分不同字段，适合大文件传输。

示例请求体片段：

复制代码

--Boundaryxxxx
Content-Disposition: form-data; name="username"

john
--Boundaryxxxx
Content-Disposition: form-data; name="avatar"; filename="photo.png"
Content-Type: image/png

[二进制数据]
--Boundaryxxxx--

前端示例：

javascript 复制代码

// application/x-www-form-urlencoded
fetch('https://api.example.com/login', {
  method: 'POST',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  body: new URLSearchParams({ username: 'john', password: '123' })
});

// multipart/form-data（文件上传）
const formData = new FormData();
formData.append('username', 'john');
formData.append('avatar', fileInput.files[0]); // fileInput是<input type="file">元素
fetch('https://api.example.com/upload', {
  method: 'POST',
  body: formData // 无需手动设置Content-Type，浏览器会自动添加boundary
});

三、JSON格式（application/json）

适用场景 ：POST/PUT/PATCH等请求，用于传递复杂结构数据（如嵌套对象、数组）。
格式特点 ：请求体为JSON字符串，键值对用双引号包裹，支持嵌套结构。
示例请求体：

json 复制代码

{
  "user": {
    "name": "John",
    "age": 30
  },
  "hobbies": ["reading", "coding"]
}

特点：

支持复杂数据类型（对象、数组、布尔值等），是前后端分离项目的主流选择。
需在请求头中指定Content-Type: application/json。
数据体积比form-data小（无分隔符开销），但不适合二进制数据。

前端示例：

javascript 复制代码

fetch('https://api.example.com/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    user: { name: 'John', age: 30 },
    hobbies: ['reading', 'coding']
  })
});

四、路径参数（Path Parameters）

适用场景 ：RESTful API中，用于标识资源的唯一ID或层级关系（如获取单个用户、修改特定订单）。
格式特点 ：参数嵌入URL路径中，通常以/:参数名表示。
示例：

复制代码

// 获取ID为123的用户
https://api.example.com/users/123

// 获取用户123的订单456
https://api.example.com/users/123/orders/456

特点：

属于URL的一部分，通常用于标识资源而非筛选条件。
需后端路由支持（如Express的/users/:id）。

前端示例：

javascript 复制代码

const userId = 123;
fetch(`https://api.example.com/users/${userId}`);

五、其他格式

XML格式（application/xml）
- 早期API常用，基于标签的结构化格式，现在逐渐被JSON取代。
- 示例：
  xml 复制代码
```
<user>
  <name>John</name>
  <age>30</age>
</user>
```
二进制格式
- 用于传递非文本数据（如图片、视频），通常结合multipart/form-data或直接发送二进制流。

总结：如何选择参数格式？

简单键值对+GET请求 → URL查询参数
表单提交/文件上传 → Form Data（x-www-form-urlencoded或multipart/form-data）
复杂结构数据（对象/数组） → JSON
标识资源ID/层级 → 路径参数

实际开发中，JSON格式因灵活性和可读性成为主流，而路径参数+JSON的组合是RESTful API的常见实践。