快捷導(dǎo)航

前端中HTTP請(qǐng)求的五種場景傳參方式詳解

更新時(shí)間：2026年04月29日 09:29:46 作者：花滿溪

在?Web?開發(fā)中,客戶端向服務(wù)端傳遞數(shù)據(jù)有多種方式,本文介紹五種常見的傳參方式,以及它們的適用場景,文中的示例代碼講解詳細(xì),有需要的小伙伴可以了解下

場景對(duì)比

傳參方式	適用場景	數(shù)據(jù)類型	大小限制
路徑參數(shù)	獲取確定性資源，如用戶信息、商品詳情	簡單字符串	無限制
查詢參數(shù)	搜索、過濾、分頁	短數(shù)據(jù)	受 URL 長度限制
x-www-form-urlencoded	傳統(tǒng)表單提交	簡單鍵值對(duì)	較小
application/json	RESTful API 調(diào)用	復(fù)雜嵌套結(jié)構(gòu)	較大
multipart/form-data	文件上傳、混合數(shù)據(jù)提交	文件 + 表單	大

一、鏈接傳參 - 路徑參數(shù)

在 URL 路徑中傳遞參數(shù)。例如：/users/{id}

// 示例：GET 請(qǐng)求
http://localhost:3000/users/123

服務(wù)端通過路徑占位符獲取參數(shù) id=123。

二、鏈接傳參 - 查詢參數(shù)

在 URL 查詢字符串中傳遞參數(shù)。查詢參數(shù)是問號(hào) ? 后的鍵值對(duì)，多個(gè)參數(shù)用 & 連接。

// 示例：GET 請(qǐng)求
http://localhost:3000/search?keyword=node&page=2

服務(wù)端獲取 keyword=node，page=2。

三、請(qǐng)求體傳參 - application/x-www-form-urlencoded

POST 請(qǐng)求，請(qǐng)求頭 Content-Type 設(shè)置為 application/x-www-form-urlencoded。

HTML 表單使用 method="post" 時(shí)，默認(rèn)使用這種編碼方式。

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

提交后，瀏覽器將表單數(shù)據(jù)編碼為 username=admin&password=123456，發(fā)送到后端。

四、請(qǐng)求體傳參 - application/json

POST 請(qǐng)求，請(qǐng)求頭 Content-Type 設(shè)置為 application/json。

這種方式需要使用 JavaScript（如 fetch）發(fā)送請(qǐng)求。

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

請(qǐng)求體內(nèi)容為 JSON 字符串：{"username":"admin","password":"123456"}。

五、請(qǐng)求體傳參 - multipart/form-data

POST 請(qǐng)求，請(qǐng)求頭 Content-Type 設(shè)置為 multipart/form-data。

這種方式通常用于文件上傳，也可以同時(shí)提交普通表單字段。

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

瀏覽器自動(dòng)生成請(qǐng)求頭：Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryO1HGmt23sYZeHuMf。

boundary 后面的字符串是分隔符，用于區(qū)分不同的字段。

請(qǐng)求體格式示例：

------WebKitFormBoundaryO1HGmt23sYZeHuMf
Content-Disposition: form-data; name="avatar"; filename="avatar.jpg"
Content-Type: image/jpeg

[文件二進(jìn)制數(shù)據(jù)]
------WebKitFormBoundaryO1HGmt23sYZeHuMf
Content-Disposition: form-data; name="username"

admin
------WebKitFormBoundaryO1HGmt23sYZeHuMf
Content-Disposition: form-data; name="password"

123456
------WebKitFormBoundaryO1HGmt23sYZeHuMf--

每個(gè)字段由 boundary 分隔，字段名和字段值之間有一個(gè)空行。

六、本地服務(wù)器

以下是一個(gè) Express 服務(wù)器實(shí)現(xiàn)，集成了上述五種傳參方式的處理邏輯。啟動(dòng)服務(wù)后，你可以配合前文的 HTML 頁面或 Postman 進(jìn)行測(cè)試。

環(huán)境準(zhǔn)備

npm init -y
npm i express cors multer

服務(wù)端代碼

const express = require('express');
const cors = require('cors');
const multer = require('multer');
const app = express();
const port = 3000;
app.use(cors());

// 1. 處理路由參數(shù)（URL 路徑中的參數(shù)）
// 示例：GET /users/123
app.get('/users/:id', (req, res) => {
    const userId = req.params.id;
    res.json({
        message: `獲取用戶信息`,
        userId: userId
    });
});

// 2. 處理 URL 查詢參數(shù)（Query String）
// 示例：GET /search?keyword=node&page=2
app.get('/search', (req, res) => {
    const { keyword, page } = req.query;
    res.json({
        message: '查詢參數(shù)已接收',
        keyword: keyword,
        page: page || 1
    });
});

// 3. 處理表單提交的 URL 編碼參數(shù)
app.use(express.urlencoded({ extended: true }));

// 示例：POST /register，表單數(shù)據(jù)
app.post('/register', (req, res) => {
    const { username, password } = req.body;
    res.json({
        username,
        password,
    });
});

// 4. 處理 POST 請(qǐng)求的 JSON 參數(shù)（請(qǐng)求體）
// 需要配置 JSON 解析中間件
app.use(express.json());

// 示例：POST /login，請(qǐng)求體 {"username": "admin", "password": "123345"}
app.post('/login', (req, res) => {
    const { username, password } = req.body;
    res.json({
        username,
        password,
    });
});

// 5.處理單文件上傳
// 配置 multer（內(nèi)存存儲(chǔ)，文件以 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
    });
});

// 啟動(dòng)服務(wù)
app.listen(port, () => {
    console.log(`start：http://localhost:${port}`);
});

啟動(dòng)與測(cè)試

運(yùn)行 node server.js 啟動(dòng)服務(wù)后，可以：