一文教你彻底消灭 AJAX 中文乱码：前端、后端双管齐下

前端

2023-07-13 14:14:42

AJAX 中文乱码：终极解决方案

概述

AJAX 是提高用户体验的利器，但在处理中文数据时却会遇到令人头疼的乱码问题。本文将深入探讨这一问题，并提供从前端到后端的全面解决方案，确保数据传输的一致性。

前端编码

HTML 编码： 使用 <meta charset="UTF-8"> 声明 HTML 页面为 UTF-8 编码。
AJAX 请求： 设置请求头中的 Content-Type 为 application/x-www-form-urlencoded; charset=UTF-8。
JSON 数据： 使用 JSON.stringify() 将数据转换为字符串，并在请求中设置 Content-Type 为 application/json; charset=UTF-8。

后端编码

PHP： 使用 mb_internal_encoding() 函数设置内部编码为 UTF-8，并指定数据库连接的字符集为 UTF-8。
ASP： 在 web.config 文件中设置 <globalization requestEncoding="utf-8" responseEncoding="utf-8" />。
JSP： 在 web.xml 文件中设置 <jsp-config pageEncoding="UTF-8" />。

HTTP 头

服务器端： 设置 HTTP 头中的 Content-Type 为 text/html; charset=UTF-8。
AJAX 请求： 设置 Accept-Charset 头，指定可以接受的字符集，如 Accept-Charset: UTF-8, *;q=0.5。

JSON 数据处理

服务器端： 使用 json_encode() 函数将数据转换为 JSON 字符串，并在响应中设置 Content-Type 为 application/json; charset=UTF-8。
前端： 使用 JSON.parse() 函数将 JSON 字符串解析为 JavaScript 对象。

数据库字符集

数据库表： 创建数据库表时指定字符集为 UTF-8。
数据库操作： 使用 UTF-8 编码的数据进行数据库操作。

服务器端输出编码

PHP： 使用 header() 函数设置 HTTP 头中的 Content-Type，指定字符集为 UTF-8。
ASP： 使用 Response.Charset 属性设置字符集。
JSP： 使用 <%@ page pageEncoding="UTF-8" %> 指令设置字符集。

前端数据处理

解码： 使用 decodeURIComponent() 函数对从服务器接收的数据进行解码。
字符串操作： 使用 JavaScript 的 String 对象方法处理字符串，如 replace()、substring() 等。

代码示例

前端：

fetch('data.php', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
    'Accept-Charset': 'UTF-8, *;q=0.5'
  },
  body: 'name=张三&age=20'
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

后端（PHP）：

<?php
mb_internal_encoding('UTF-8');
header('Content-Type: text/html; charset=UTF-8');
$data = ['name' => '张三', 'age' => 20];
echo json_encode($data, JSON_UNESCAPED_UNICODE);
?>