前端中HTTP请求的五种场景传参方式解析

作者：袖梨 2026-06-08

在 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 -ynpm 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/123app.get('/users/:id', (req, res) => {    const userId = req.params.id;    res.json({        message: `获取用户信息`,        userId: userId    });});// 2. 处理 URL 查询参数（Query String）// 示例：GET /search?keyword=node&page=2app.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 启动服务后，可以：