encodeURIComponent编码后PHP服务端解码异常及meta charset作用疑问

问题描述 #

通过GET请求的查询字符串传递JSON字符串时遇到两个核心问题：

• 未编码直接传递时，&等特殊字符会被当作参数分隔符，直接截断JSON字符串，导致接收内容不完整
• 使用encodeURIComponent编码后，PHP端通过$_GET获取的内容出现乱码，手动调用urldecode也无法解决
  添加<meta charset="UTF-8">后问题彻底解决，但存在疑问：HTML文件本身已是UTF-8编码，请求和响应头也包含charset=UTF-8，为何meta标签仍能起到关键作用？

相关代码 #

HTML代码 #

<html>
    <head>
        <script type="text/javascript">
            function executeRequest(applyUriEncode) {
                var json = '{"foo":"💀🍕⚡💎&🎁❤很久很久以前"}';
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.open('GET', 'https://example.com/test.php?json='+(applyUriEncode ? encodeURIComponent(json) : json), false);
                
                xmlhttp.onreadystatechange = function() {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        console.log("applyUriEncode: "+(applyUriEncode ? "true" : "false"));
                        console.log(xmlhttp.responseText);
                    }
                };
                xmlhttp.send();
            }
        </script>
    </head>
    <body>
        <button onClick="executeRequest(true);">Submit encoded</button>
        <button onClick="executeRequest(false);">Submit unencoded</button>
    </body>
</html>

PHP代码 #

<?php // test.php
echo $_GET['json'];

实际输出 #

applyUriEncode: true
{"foo":"💀ðŸ•âš¡ðŸ’Ž&ðŸŽâ¤å¾ˆä¹…很久以å‰"}

applyUriEncode: false
{"foo":"💀🍕⚡💎

期望输出 #

{"foo":"💀🍕⚡💎&🎁❤很久很久以前"}

问题分析与解答 #

1. 未编码时字符串截断的原因 #

GET查询字符串中&是官方定义的参数分隔符，未编码直接传递的话，服务器会把&后面的内容识别为新参数，导致json参数值被截断在&之前。这一步必须用encodeURIComponent对整个JSON字符串编码，将&转义为%26，避免被误解析。

2. 编码后乱码的原因及meta标签的作用 #

乱码的本质是前后端编码解码不匹配，而<meta charset="UTF-8">解决问题的核心逻辑是：

• 虽然HTML文件本身是UTF-8，请求响应头也声明了UTF-8，但浏览器在解析页面时，若没有明确的meta标签指定编码，可能会出现编码识别偏差（比如根据页面内容误判为GBK）。
• encodeURIComponent是基于当前页面的编码来处理字符串的，如果浏览器误判编码，那么编码后的字符串就不是UTF-8格式的URL编码。PHP默认用UTF-8解码$_GET参数，自然会出现乱码，此时调用urldecode也没用——因为编码的源头就错了。
• 添加<meta charset="UTF-8">后，浏览器会强制以UTF-8解析页面，encodeURIComponent就会用UTF-8编码字符串，PHP端解码时就能得到正确内容。

3. 更稳妥的解决方案 #

除了添加meta标签，还可以在PHP端主动明确字符编码，避免依赖浏览器的编码识别：

<?php
header('Content-Type: text/html; charset=UTF-8');
mb_internal_encoding('UTF-8'); // 确保内部处理用UTF-8
echo $_GET['json'];

同时，JavaScript中必须坚持用encodeURIComponent编码要传递的JSON字符串，这是GET请求传递带特殊字符内容的标准规范。

内容的提问来源于stack exchange，提问作者Alexander Tobias Bockstaller