HTTP 请求的五种传参方式

在 Web 开发中，客户端向服务端传递数据有多种方式。本文介绍五种常见的传参方式，以及它们的适用场景。

为了让读者更好地理解每种传参方式，文中示例均使用 Express 搭建的本地服务器进行演示。你可以在本地启动服务后，通过浏览器或 Postman 实际发送请求，观察服务端的接收效果。

场景对比

传参方式	适用场景	数据类型	大小限制
路径参数	获取确定性资源，如用户信息、商品详情	简单字符串	无限制
查询参数	搜索、过滤、分页	短数据	受 URL 长度限制
x-www-form-urlencoded	传统表单提交	简单键值对	较小
application/json	RESTful API 调用	复杂嵌套结构	较大
multipart/form-data	文件上传、混合数据提交	文件 + 表单	大

一、链接传参 - 路径参数

在 URL 路径中传递参数。例如：/users/{id}

javascript 复制代码

// 示例：GET 请求
http://localhost:3000/users/123

服务端通过路径占位符获取参数 id=123。

二、链接传参 - 查询参数

在 URL 查询字符串中传递参数。查询参数是问号 ? 后的键值对，多个参数用 & 连接。

javascript 复制代码

// 示例：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" 时，默认使用这种编码方式。

html 复制代码

<!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）发送请求。

html 复制代码

<!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。

这种方式通常用于文件上传，也可以同时提交普通表单字段。

html 复制代码

<!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 后面的字符串是分隔符，用于区分不同的字段。

请求体格式示例：

css 复制代码

------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 进行测试。

环境准备

bash 复制代码

npm init -y
npm i express cors multer

服务端代码

js 复制代码

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 手动构造请求，观察响应结果
查看终端日志，确认服务端是否正确接收参数