前端中HTTP请求的五种场景传参方式详解
在 Web 开发中，客户端向服务端传递数据有多种方式。本文介绍五种常见的传参方式，以及它们的适用场景。
为了让读者更好地理解每种传参方式，文中示例均使用 Express 搭建的本地服务器进行演示。你可以在本地启动服务后，通过浏览器或 Postman 实际发送请求，观察服务端的接收效果。
场景对比
| 传参方式 | 适用场景 | 数据类型 | 大小限制 |
|---|---|---|---|
| 路径参数 | 获取确定性资源，如用户信息、商品详情 | 简单字符串 | 无限制 |
| 查询参数 | 搜索、过滤、分页 | 短数据 | 受 URL 长度限制 |
| x-www-form-urlencoded | 传统表单提交 | 简单键值对 | 较小 |
| application/json | RESTful API 调用 | 复杂嵌套结构 | 较大 |
| multipart/form-data | 文件上传、混合数据提交 | 文件 + 表单 | 大 |
一、链接传参 - 路径参数
在 URL 路径中传递参数。例如：/users/{id}
// 示例：GET 请求 http://localhost:3000/users/123
服务端通过路径占位符获取参数 id=123。
二、链接传参 - 查询参数
在 URL 查询字符串中传递参数。查询参数是问号 ? 后的键值对，多个参数用 & 连接。
// 示例：GET 请求 http://localhost:3000/search?keyword=node&page=2
服务端获取 keyword=node，page=2。
三、请求体传参 - application/x-www-form-urlencoded
POST 请求，请求头 Content-Type 设置为 application/x-www-form-urlencoded。
HTML 表单使用 method="post" 时，默认使用这种编码方式。
<!DOCTYPE html>
<html>
<body>
<form action="http://localhost:3000/register" method="post">
<input type="text" name="username">
<input type="password" name="password">
<button>submit</button>
</form>
</body>
</html>提交后，浏览器将表单数据编码为 username=admin&password=123456，发送到后端。
四、请求体传参 - application/json
POST 请求，请求头 Content-Type 设置为 application/json。
这种方式需要使用 JavaScript（如 fetch）发送请求。
<!DOCTYPE html>
<html>
<body>
<script>
fetch('http://localhost:3000/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
username: "admin",
password: "123456",
})
});
</script>
</body>
</html>请求体内容为 JSON 字符串：{"username":"admin","password":"123456"}。
五、请求体传参 - multipart/form-data
POST 请求，请求头 Content-Type 设置为 multipart/form-data。
这种方式通常用于文件上传，也可以同时提交普通表单字段。
<!DOCTYPE html>
<html>
<body>
<form action="http://localhost:3000/upload" method="post" enctype="multipart/form-data">
<input type="file" accept=".jpg" name="avatar">
<input type="text" name="username">
<input type="password" name="password">
<button>submit</button>
</form>
</body>
</html>浏览器自动生成请求头：Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryO1HGmt23sYZeHuMf。
boundary 后面的字符串是分隔符，用于区分不同的字段。
请求体格式示例：
------WebKitFormBoundaryO1HGmt23sYZeHuMf
Content-Disposition: form-data; name="avatar"; filename="avatar.jpg"
Content-Type: image/jpeg
[文件二进制数据]
------WebKitFormBoundaryO1HGmt23sYZeHuMf
Content-Disposition: form-data; name="username"
admin
------WebKitFormBoundaryO1HGmt23sYZeHuMf
Content-Disposition: form-data; name="password"
123456
------WebKitFormBoundaryO1HGmt23sYZeHuMf--
每个字段由 boundary 分隔，字段名和字段值之间有一个空行。
六、本地服务器
以下是一个 Express 服务器实现，集成了上述五种传参方式的处理逻辑。启动服务后，你可以配合前文的 HTML 页面或 Postman 进行测试。
环境准备
npm init -y npm i express cors multer
服务端代码
const express = require('express');
const cors = require('cors');
const multer = require('multer');
const app = express();
const port = 3000;
app.use(cors());
// 1. 处理路由参数（URL 路径中的参数）
// 示例：GET /users/123
app.get('/users/:id', (req, res) => {
const userId = req.params.id;
res.json({
message: `获取用户信息`,
userId: userId
});
});
// 2. 处理 URL 查询参数（Query String）
// 示例：GET /search?keyword=node&page=2
app.get('/search', (req, res) => {
const { keyword, page } = req.query;
res.json({
message: '查询参数已接收',
keyword: keyword,
page: page || 1
});
});
// 3. 处理表单提交的 URL 编码参数
app.use(express.urlencoded({ extended: true }));
// 示例：POST /register，表单数据
app.post('/register', (req, res) => {
const { username, password } = req.body;
res.json({
username,
password,
});
});
// 4. 处理 POST 请求的 JSON 参数（请求体）
// 需要配置 JSON 解析中间件
app.use(express.json());
// 示例：POST /login，请求体 {"username": "admin", "password": "123345"}
app.post('/login', (req, res) => {
const { username, password } = req.body;
res.json({
username,
password,
});
});
// 5.处理单文件上传
// 配置 multer（内存存储，文件以 Buffer 形式存在）
const upload = multer({ storage: multer.memoryStorage() });
app.post('/upload', upload.single('avatar'), (req, res) => {
// req.file 包含上传的文件信息
console.log('文件信息:', req.file);
console.log('文本字段:', req.body);
res.json({
message: '文件上传成功',
filename: req.file.originalname,
size: req.file.size,
mimetype: req.file.mimetype
});
});
// 启动服务
app.listen(port, () => {
console.log(`start：http://localhost:${port}`);
});
启动与测试
运行 node server.js 启动服务后，可以：
- 访问前文的 HTML 页面，直接在浏览器中发送请求
- 使用 Postman 或 curl 手动构造请求，观察响应结果
- 查看终端日志，确认服务端是否正确接收参数
到此这篇关于前端中HTTP请求的五种场景传参方式详解的文章就介绍到这了,更多相关HTTP请求传参方式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
结合ES6 编写 JavaScript 设计模式中的结构型模式
这篇文章主要介绍了结合ES6编写JavaScript 设计模式中的结构型模式，设计模式是软件设计中常见问题的解决方案，这些模式很容易重复使用并且富有表现力2022-07-07
这篇文章主要介绍了JavaScript实现在页面间传值的方法,涉及javascript传值的技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
这篇文章主要介绍了原生js结合html5制作简易的双色子游戏的代码，是个人学习练手用的，虽然写的不太好，还是分享给大家，有需要的小伙伴可以参考下。2015-03-03
这篇文章主要介绍了微信小程序实现用户登录模块服务器搭建，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
这篇文章主要介绍了js中如何对url进行编码和解码问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-11-11
防抖是一种 优化高频触发事件 的技术,其核心思想是在事件被频繁触发时,只有最后一次操作会被执行,中间的触发会被忽略,本文给大家介绍JavaScript防抖与节流知识,感兴趣的朋友一起看看吧2025-10-10
这篇文章主要介绍了JS获取URL中的参数数据，有需要的朋友可以参考一下2013-12-12
今天小编就为大家分享一篇浅谈Layui的eleTree树式选择器使用方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要为大家详细介绍了openLayer4实现动态改变标注图标，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
这篇文章主要介绍了详解JavaScript时间格式化的相关资料,需要的朋友可以参考下2015-12-12
最新评论