json返回值如何显示中文

JSON 返回值中文显示乱码？一招教你轻松解决！

在 Web 开发中，JSON（JavaScript Object Notation）因其轻量级、易读和易于解析的特性，已成为前后端数据交换的事实标准，许多开发者都曾遇到过这样一个令人头疼的问题：后端正常返回了包含中文的数据，但在前端页面或调试工具中显示的却是乱码，如 "\u4e2d\u6587" 或。

别担心,这个问题非常普遍，并且通常有明确的解决方法，本文将探讨 JSON 返回值中文显示乱码的根本原因，并提供一套完整的解决方案，让你从此告别乱码烦恼。

乱码的“元凶”：编码不一致

要解决问题,首先要明白问题出在哪里，JSON 本身并不关心字符编码，它只负责按照标准格式描述数据，真正决定字符如何显示的，是数据传输和解析过程中所使用的字符编码。

乱码的根源几乎总是出在 编码不一致 上，一个典型的数据流程是这样的：

后端序列化：后端程序将数据对象（如一个包含中文的字典或对象）序列化成 JSON 字符串。
HTTP 响应：后端通过 HTTP 响应将这个 JSON 字符串发送给前端，HTTP 响应头中会声明内容的编码方式。
前端解析：浏览器接收到数据后，会根据响应头中声明的编码来解析和显示这些字符。

如果这三个环节中任何一个环节的编码设置出错,导致前后使用的编码不匹配，中文就极有可能显示为乱码。

最常见的场景是：后端在序列化时使用了 UTF-8 编码，但在 HTTP 响应头中错误地声明了 ISO-8859-1 或其他编码，而浏览器默认会遵循响应头的声明，于是就用错误的编码去解析正确的 UTF-8 字节流，乱码就此产生。

解决方案：从后端到前端的全链路排查

解决 JSON 中文乱码问题，需要像侦探一样，沿着数据流动的路径逐一排查，下面我们以几种主流的后端技术为例，讲解具体的修复方法。

核心原则：确保所有环节都统一使用 UTF-8 编码。

后端配置（治本之策）

绝大多数情况下,问题都出在后端，确保后端正确设置响应头和序列化编码是解决问题的关键。

Java (Spring Boot)

在 Spring Boot 中，默认情况下已经正确配置了 UTF-8，但如果你使用了旧版本或自定义配置，可能会出现问题。

错误示例（可能导致乱码）：

@GetMapping("/user")
public String getUser() {
    // 直接返回字符串，如果响应头设置不当，可能会乱码
    return "{\"name\": \"张三\", \"city\": \"北京\"}";
}

正确做法：

Spring Boot 默认使用 StringHttpMessageConverter 来处理字符串返回，其默认编码就是 UTF-8，所以通常你什么都不用做，它就能正确工作，如果遇到问题，可以显式配置：

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void configureMessageConverters(List<HttpMessageConverter<?>> converters) {
        StringHttpMessageConverter converter = new StringHttpMessageConverter(StandardCharsets.UTF_8);
        converter.setWriteAcceptCharset(false); // 避免在 Accept-Charset 头中重复设置编码
        converters.add(converter);
    }
}

更推荐的方式是使用 @ResponseBody 注解，它会自动处理编码：

@GetMapping("/user")
@ResponseBody
public Map<String, Object> getUser() {
    Map<String, Object> map = new HashMap<>();
    map.put("name", "张三");
    map.put("city", "北京");
    return map; // Spring Boot 会自动将其序列化为 JSON，并设置正确的 Content-Type
}

Python (Flask)

Flask 默认的 jsonify 函数已经处理好了编码问题。

正确做法：

直接使用 jsonify，它会自动设置正确的 Content-Type 为 application/json; charset=utf-8。

from flask import Flask, jsonify
app = Flask(__name__)
@app.route('/user')
def get_user():
    data = {
        "name": "李四",
        "city": "上海"
    }
    return jsonify(data) # 推荐！自动处理编码

错误做法（不要手动拼接 JSON 字符串）：

# 错误！如果响应头没设对，就会乱码
@app.route('/user_bad')
def get_user_bad():
    return '{"name": "李四", "city": "上海"}'

Node.js (Express)

Express 框架默认情况下对非 ASCII 字符（如中文）的处理可能会有问题，需要手动设置。

正确做法：

在应用的最开始,设置 Content-Type 为 application/json; charset=utf-8。

const express = require('express');
const app = express();
// 全局设置响应头，解决中文乱码
app.use((req, res, next) => {
    res.setHeader('Content-Type', 'application/json; charset=utf-8');
    next();
});
app.get('/user', (req, res) => {
    const user = {
        name: "王五",
        city: "广州"
    };
    res.json(user); // res.json 会自动序列化并发送
});
app.listen(3000, () => console.log('Server running on port 3000'));

PHP

PHP 在处理 JSON 时，需要确保 Content-Type 头部和 json_encode 函数的编码一致。

正确做法：

使用 header() 函数设置响应头，并确保源文件编码是 UTF-8。

<?php
// 确保此文件本身以 UTF-8 编码保存且无 BOM
header('Content-Type: application/json; charset=utf-8');
$data = [
    "name" => "赵六",
    "city" => "深圳"
];
echo json_encode($data, JSON_UNESCAPED_UNICODE); // 关键参数！

JSON_UNESCAPED_UNICODE 是关键！ 这个参数告诉 json_encode 不要将 Unicode 字符（如 \u4e2d\u6587）转义成 ASCII，而是直接输出原始的中文，如果你不加这个参数，中文虽然不会乱码，但会以转义形式出现，这通常也不是我们想要的。

前端处理（应急或特殊场景）

虽然问题大多在后端,但了解前端的处理方式也很有帮助。

浏览器开发者工具

在 Chrome 或 Firefox 的开发者工具（F12）中，如果你在 Network 面板看到响应内容是乱码，可以尝试在响应头部分手动修改 Content-Type。

在 Network 标签页中找到你的请求。
点击进入响应详情。
在响应头部分找到 Content-Type。
双击它,将其修改为 application/json; charset=utf-8。
按回车,此时下方的响应预览区应该就能正确显示中文了。

这只是一个调试技巧，不能作为最终解决方案，因为它只影响你的本地浏览器。

使用 JavaScript 解码

如果你从一个不确定编码的 API 获取到数据，并且数据中的中文是 Unicode 转义序列（如 "\u4e2d\u6587"），你可以使用 JSON.parse() 的第二个参数（reviver）来手动解码。

const escapedJsonString = '{"name": "\\u738b\\u4e94", "city": "\\u5e7f\\u5dde"}';
// 使用一个 reviver 函数来处理 Unicode 字符
const user = JSON.parse(escapedJsonString, (key, value) => {
    if (typeof value === 'string' && /^[\u0000-\u007F]+$/.test(value)) {
        // 这是一个简单的检查，更复杂的逻辑可以判断是否是转义序列
        // 但通常 JSON.parse 已经能处理大部分情况
        try {
            // 尝试解码，如果失败则返回原值
            return decodeURIComponent(escape(value));
        } catch (e) {
            return value;
        }
    }
    return value;
});
console.log(user.name); // 输出: 王五

注意：在现代浏览器中，JSON.parse() 通常已经能很好地处理 Unicode 转义序列，所以手动解码的情况比较少见，了解即可。