前端請求中，如何發送中文參數值

作者：前端老兵 2024-07-26 08:53:09

開發前端

在前端向后端發送含有中文參數的請求時，通常需要對這些參數進行編碼以確保它們能夠正確地在網絡上傳輸并且被后端識別。

1. 前端請求中，如何發送中文參數值

在前端向后端發送含有中文參數的請求時，通常需要對這些參數進行編碼以確保它們能夠正確地在網絡上傳輸并且被后端識別。

在前端請求中發送和顯示中文參數值涉及到兩個主要方面：

一是確保中文字符在傳輸過程中正確編碼，
二是確保瀏覽器和服務器能夠正確解析和顯示中文字符。

下面是一些具體的步驟和建議：

1.1. 發送中文參數值

當使用 AJAX、Fetch API 或其他 HTTP 請求庫時，確保中文參數值被正確編碼。

通常，可以使用 JavaScript 的 encodeURIComponent() 函數來編碼參數值。

示例代碼:

const params = new URLSearchParams();
params.append('name', encodeURIComponent('張三'));
fetch('https://example.com/api', {
    method: 'POST',
    body: params,
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
    }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

1.2. 確保服務器接收和處理中文參數

服務器端應設置正確的字符集（通常是 UTF-8），并使用相應的解碼方法來處理接收到的中文參數。

例如，在 Node.js 的 Express 框架中，你可以這樣做：

const express = require('express');
const app = express();
app.use(express.urlencoded({ extended: false, parameterLimit: 100000 }));
app.set('view engine', 'ejs'); // 或者你選擇的模板引擎
app.set('views', './views');

app.post('/api', (req, res) => {
    const name = decodeURIComponent(req.body.name);
    console.log(name); // 輸出：張三
    res.send(`Hello ${name}`);
});

app.listen(3000);

1.3. 顯示中文內容

確保 HTML 頁面的 <meta> 標簽包含正確的字符集定義，并且任何動態生成的 HTML 內容也使用了正確的字符集。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>中文頁面</title>
</head>
<body>
    <h1 id="greeting"></h1>

    <script>
        // 假設從服務器獲取的數據已經存儲在變量 `data` 中
        document.getElementById('greeting').innerText = data.name;
    </script>
</body>
</html>

1.4. 使用 JSON

如果數據是以 JSON 格式傳輸，那么不需要額外的編碼和解碼步驟，因為 JSON 已經包含了對 Unicode 字符的支持。只需要確保前后端都使用 UTF-8 編碼即可。

// 前端發送 JSON 數據
fetch('https://example.com/api', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json;charset=UTF-8'
    },
    body: JSON.stringify({ name: '張三' })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

// 后端接收 JSON 數據
app.post('/api', (req, res) => {
    req.on('data', chunk => {
        let data = '';
        data += chunk.toString();
        const jsonData = JSON.parse(data);
        console.log(jsonData.name); // 輸出：張三
        res.send(`Hello ${jsonData.name}`);
    });
});

遵循以上步驟，你應該能夠在前端和后端之間成功發送和顯示中文參數值。

責任編輯：武曉燕來源：前端愛好者

前端參數后端