PHP从MySQL获取UTF-8非英文字符，Ajax无法在Typeahead显示

我之前也碰到过一模一样的多语言词汇展示问题，结合踩过的坑，给你梳理几个关键修复点：

1. 先修正PHP的响应头格式 #

你当前写的header('Content-Type: json; charset=utf-8');是错误的——JSON类型的响应头规范写法是application/json，错误的Content-Type会让浏览器/前端无法正确解析编码，直接导致乱码：

<?php
// 正确的响应头设置
header('Content-Type: application/json; charset=utf-8');
// 后续数据库查询、逻辑代码...

2. 确保MySQL连接与查询的编码一致 #

哪怕数据库表本身是UTF-8编码，如果PHP连接数据库时没指定编码，查询出来的字符依然会乱码。根据你用的数据库扩展，添加编码设置：

• 如果你用的是mysqli：

$conn = mysqli_connect($servername, $username, $password, $dbname);
// 设置连接编码为utf8mb4（支持更多特殊字符，比如emoji，也可以用utf8）
mysqli_set_charset($conn, "utf8mb4");

• 如果你用的是PDO：

$conn = new PDO(
    "mysql:host=$servername;dbname=$dbname;charset=utf8mb4", 
    $username, 
    $password
);

3. 让JSON输出保留原始UTF-8字符 #

PHP的json_encode默认会把非ASCII字符转成\uXXXX格式的Unicode转义序列，虽然大部分场景能解析，但Typeahead对这种转义字符的支持可能有问题。添加JSON_UNESCAPED_UNICODE参数，直接输出原始UTF-8字符：

// 假设$data是你从数据库取出的词汇数组
echo json_encode($data, JSON_UNESCAPED_UNICODE);
exit; // 输出后直接终止脚本，避免额外输出干扰

4. 前端Ajax的编码兜底设置 #

你的前端代码大体没问题，但可以明确指定请求的编码，确保前后端编码完全一致：

$(document).ready(function(){
    $('#country').typeahead({
        source: function(query, result) {
            $.ajax({
                url:"test.php",
                method:"POST",
                data:{query:query},
                dataType:"json",
                // 明确指定请求编码为UTF-8
                contentType: "application/x-www-form-urlencoded; charset=utf-8",
                success:function(data) {
                    result($.map(data, function(item){
                        return item;
                    }));
                }
            })
        }
    });
});

按这个顺序排查下来，基本就能解决非英文字符在Typeahead中显示异常的问题了——我之前就是靠这套流程搞定了多语言词汇的自动补全功能。

内容的提问来源于stack exchange，提问作者user5005768-hd