淘先锋技术网

首页 1 2 3 4 5 6 7

json传中文 前台乱码问题

在前后端分离的开发模式中，JSON已经成为了前后端之间数据交互的主流格式，尤其是在一些RESTful API的设计中，JSON更是不可或缺。但是在使用JSON传输中文时，可能会遇到前台乱码的问题，下面我们就来探讨一下这个问题。

json传中文 前台乱码问题

JSON本质上是一种字符串，而字符串的本质是一系列的字节码。在JSON中，使用UTF-8编码将中文字符转换为字节码传输，然后前台进行解读。但是，如果在前端使用的是默认的ISO-8859-1编码方式，就有可能出现乱码问题。


// 后端代码
@RequestMapping(value = "/test", method = RequestMethod.POST)
@ResponseBody
public Map test(@RequestBody JSONObject jsonObj) {
    String name = jsonObj.getString("name");
    // 返回结果
    Map result = new HashMap<>();
    result.put("result", "success");
    result.put("name", name);
    return result;
}


// 前端代码
axios.post('/test', {
        name: '张三'
    })
    .then(function(response) {
        console.log(response.data.name);
    })
    .catch(function(error) {
        console.log(error);
    });

以上的代码片段中，我们在前端使用了axios进行了POST请求，并且传递了一个JSON数据{name: '张三'} 。在后端，我们将请求体解析为了一个JSONObject，然后获取了name的值，返回一个包含name字段的Map给前端。如果name字段的值是中文，那么在前端console.log中输出时，就可能出现乱码情况。

解决这个问题其实非常简单，我们只需要在前端的HTTP请求头中设置Content-Type为application/json;charset=UTF-8即可。


axios.post('/test', {
        name: '张三'
    }, {
        headers: {
            'Content-Type': 'application/json;charset=UTF-8'
        }
    })
    .then(function(response) {
        console.log(response.data.name);
    })
    .catch(function(error) {
        console.log(error);
    });

通过设置Content-Type，我们告诉后端该请求的数据格式为JSON，并且使用UTF-8编码传输中文字符，这样就能够保证前后端数据交互时不会出现乱码问题。

前端response