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

更新时间：2026年04月29日 09:29:46 作者：花满溪

在 Web 开发中,客户端向服务端传递数据有多种方式,本文介绍五种常见的传参方式,以及它们的适用场景,文中的示例代码讲解详细,有需要的小伙伴可以了解下

场景对比

传参方式	适用场景	数据类型	大小限制
路径参数	获取确定性资源，如用户信息、商品详情	简单字符串	无限制
查询参数	搜索、过滤、分页	短数据	受 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请求传参方式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JS双向链表实现与使用方法示例(增加一个previous属性实现)
这篇文章主要介绍了JS双向链表实现与使用方法,在之前链表的基础上增加一个previous属性实现的双向链表功能,需要的朋友可以参考下
2019-01-01
JavaScript类型系统之正则表达式
正则又叫规则或模式，是一个强大的字符串匹配工具。javascript通过RegExp类型来支持正则表达式，本文给大家介绍javascript类型系统之正则表达式，对js正则表达式相关知识感兴趣的朋友一起学习吧
2016-01-01
JavaScript中奇葩的假值示例应用
这篇文章主要介绍了JavaScript中奇葩的假值应用,需要的朋友可以参考下
2014-03-03
JavaScript循环遍历小结
本文给大家总结了javascript中的循环遍历，给大家总结的非常全面，感兴趣的朋友跟随小编一起看看吧
2018-09-09
js刷新页面location.reload()用法详解
这篇文章主要介绍了js刷新页面location.reload()用法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-12-12
分享11个常用JavaScript小技巧
在我们的日常开发过程中，我们经常会遇到数字与字符串转换，检查对象中是否存在对应值，条件性操作对象数据，过滤数组中的错误值，等等这类处理。本文整理出了一些常用的小技巧，希望大家能喜欢
2022-06-06
js常用函数2008-8-16整理
方便使用js的朋友，把下面的函数找到你想要的功能函数，复制部分判断输入文本是否为身份证号码，如为不正确则提示
2008-08-08
微信小程序中如何使用xlsx(xlsx.mini.min.js)实现Excel导入导出功能
这篇文章主要介绍了微信小程序中如何使用xlsx(xlsx.mini.min.js)实现Excel导入导出功能的相关资料,包括准备工作、导出Excel的基本流程、导入Excel的基本流程、常用API说明以及注意事项,需要的朋友可以参考下
2026-01-01
JS控制阿拉伯数字转为中文大写示例代码
阿拉伯数字如何转为中文大写这个实现的方法有很多，在本文将为大家介绍下js中时如何实现的，感兴趣的朋友可以参考下
2013-09-09
js Li来实现的效果
原理就是利用js控制li的一些样式，在实际应用中，还需要注意li的list-style属性。
2008-12-12