JQuery ajax 返回json时出现中文乱码该如何解决

JQuery在使用ajax异步请求数据时，返回的数据通常是以JSON格式返回。如果返回的数据中存在中文字符，那么在部分浏览器下可能会出现中文乱码的问题。本文将为大家介绍在JQuery异步请求返回JSON数据时出现中文乱码的解决方法。

问题现象

Jquery ajax请求返回JSON时，中文字符出现乱码或其他非预期的字符。

解决方法

方法一：在后台进行字符编码转换

当从后端获取到JSON数据时，后端将JSON数据中的中文字符编码转换为UTF-8格式，然后返回给前端，这样前端在接收到数据后就不会出现中文乱码的情况。

例如，使用PHP语言时，可以在返回JSON之前进行如下处理：

header('Content-Type:application/json; charset=utf-8');
echo json_encode($data, JSON_UNESCAPED_UNICODE);

这样就可以保证返回的数据中的中文字符不会出现乱码。

方法二：在前端设置字符编码格式

我们可以在前端设置接收数据的字符编码格式为UTF-8，从而保证中文字符正常显示。

$.ajax({
    url: 'example.json',
    type: 'get',
    dataType: "json",
    success: function (data) {
        console.log(data);
    },
    error: function (err) {
        console.log(err);
    },
    beforeSend:function(xhr){
        xhr.overrideMimeType("text/plain;charset=utf-8");
    }
});

我们可以使用 beforeSend 方法来在发送请求前设定请求头，指定请求的 MIME 类型和字符集为 "text/plain;charset=utf-8"，这样就可以保证接收到的数据中的中文字符不会出现乱码。

示例说明

下面是一个简单的服务端返回JSON数据示例，展示如何解决中文乱码问题。

后端PHP处理

header('Content-Type:application/json; charset=utf-8');

$data = array("name" => "张三", "age" => 18, "address" => "北京市海淀区");
echo json_encode($data, JSON_UNESCAPED_UNICODE);

前端JQuery处理

$.ajax({
    url: "example.php",
    type: "GET",
    dataType: "json",
    success: function(res) {
        console.log(res);
    },
    error: function(xhr, status, err) {
        console.log(status);
    },
    beforeSend:function(xhr){
        xhr.overrideMimeType("text/plain;charset=utf-8");
    }
});

上面的代码中，我们可以看到在请求前设定请求头，解决了中文乱码的问题。