如何在HTML中渲染中日非英文字符？JSON+JQuery渲染乱码求助

嘿，我之前也踩过编码乱码的坑，给你整理几个针对性的解决方案，你可以挨个排查试试：

1. 确保后端生成JSON时的编码正确（重点！） #

如果你的JSON是通过PHP生成的，一定要在json_encode时加上JSON_UNESCAPED_UNICODE参数，不然中文会被转成Unicode转义序列，在某些环境下就会出现乱码。示例代码：

<?php
$data = ["my_chinise_name" => "吉米"];
// 关键是第二个参数，保证中文原样输出
echo json_encode($data, JSON_UNESCAPED_UNICODE);
?>

2. 给HTML页面设置正确的编码声明 #

在HTML的<head>标签最顶部添加UTF-8编码声明，确保浏览器用正确的编码解析页面内容：

<head>
  <meta charset="UTF-8">
  <!-- 其他head内容放在后面 -->
</head>

3. 服务器响应头指定UTF-8编码 #

在PHP输出JSON之前，先设置响应头的Content-Type为UTF-8，避免服务器默认用ISO-8859-1等编码返回内容：

<?php
header('Content-Type: application/json; charset=utf-8');
// 再输出JSON
$data = ["my_chinise_name" => "吉米"];
echo json_encode($data, JSON_UNESCAPED_UNICODE);
?>

4. 优化jQuery的请求配置 #

如果是通过AJAX获取JSON数据，要明确告诉jQuery解析为JSON格式，避免当成普通文本处理导致编码错误：

$.ajax({
  url: '你的接口地址.php',
  dataType: 'json', // 强制解析为JSON
  success: function(object) {
    // 先在控制台确认内容是否正确
    console.log(object.my_chinise_name);
    $('input').val(object.my_chinise_name);
  }
});

5. 快速排查定位问题 #

• 先打开浏览器控制台，打印object.my_chinise_name，如果控制台显示的是正确的中文，那问题出在渲染到input的环节（大概率是页面编码没设对）；
• 如果控制台就显示乱码，那肯定是后端返回的JSON本身编码错误，重点检查上面的1、3两步。

内容的提问来源于stack exchange，提问作者Jimmy.B