前端请求中，如何发送中文参数值-编程学习网

在前端请求中发送和显示中文参数值涉及到两个主要方面：

一是确保中文字符在传输过程中正确编码，
二是确保浏览器和服务器能够正确解析和显示中文字符。

下面是一些具体的步骤和建议：

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 页面的标签包含正确的字符集定义，并且任何动态生成的 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}`);
    });
});

遵循以上步骤，你应该能够在前端和后端之间成功发送和显示中文参数值。