本文详解为何直接用 `json_encode()` 输出到 `` 会导致 json 解析失败，并提供基于 url 编码/解码的可靠解决方案，确保多维对象数组在 php 与 javascript 间完整、无损传输。
在 Web 开发中，常需将 PHP 后端生成的结构化数据（如对象数组）透传至前端 JavaScript 使用。一个常见做法是借助 元素暂存 JSON 字符串，再由 jQuery 读取并解析。但若处理不当，极易触发 JSON.parse() 报错——例如你遇到的 Uncaught SyntaxError: Expected property name or '}' in JSON at position 2，其根本原因并非 JSON 本身无效，而是 HTML 属性值上下文破坏了 JSON 的原始格式。
? 问题根源：HTML 属性值截断
PHP 的 json_encode($tag_filter_list) 会输出类似：
[{"project28":"deer browse"},{"project28":"regeneration"},{"project29":"recreation"}]但当你将其直接嵌入 HTML 属性：
<input type="hidden" id="tag_filter_list" value="<?php echo json_encode($tag_filter_list); ?>" />
浏览器解析时会将第一个双引号 " 视为 value= 属性值的结束符。结果实际渲染为：
立即学习“前端免费学习笔记（深入）”；
<input type="hidden" id="tag_filter_list" value="[{"project28":"deer browse"}]">→ 此时 $('#tag_filter_list').val() 仅返回 "[{（即从开头到第一个 " 前的内容），后续字符被 HTML 解析器丢弃。因此 JSON.parse() 收到的是不合法片段，自然报错。
✅ 正确方案：URL 编码 + 解码
解决思路很清晰：避免 JSON 中的特殊字符（", {, }, [, ], , 等）被 HTML 解析器误判。推荐使用 urlencode() 对 JSON 字符串进行编码，再在 JS 端用 decodeURIComponent() 还原：
✅ PHP 端（控制器/视图）
<?php
$tag_filter_list = [];
foreach ($data['toolsProjects'] as $tool) {
foreach ($tool->tags as $tag) {
$tag_filter_list[] = [$tool->uid => $tag->fldTag];
}
}
?>
<input type="hidden" id="tag_filter_list"
value="<?php echo urlencode(json_encode($tag_filter_list)); ?>" />✅ JavaScript 端（jQuery）
const rawJson = $('#tag_filter_list').val();
const tagFilterList = JSON.parse(decodeURIComponent(rawJson));
console.log(tagFilterList);
// 输出：Array(6) [ {project28: "deer browse"}, {project28: "regeneration"}, ... ]? 提示：urlencode() 将双引号转为 %22，花括号转为 %7B/%7D，方括号转为 [/] 等，彻底规避 HTML 属性截断风险。
⚠️ 注意事项与最佳实践
- 不要使用 htmlspecialchars() 替代 urlencode()：htmlspecialchars() 主要防 XSS，但不会编码 {, } 等 JSON 关键字符，仍可能被截断。
- 避免手动拼接 JSON 字符串：永远优先使用 json_encode()，它会自动处理引号转义、Unicode 编码等细节。
- 验证 JSON 有效性（开发期）：可在 PHP 中加一句 if (json_last_error() !== JSON_ERROR_NONE) die('Invalid JSON'); 防御数据异常。
- 考虑替代方案（进阶）：对复杂场景，推荐将数据注入 <script> 标签内声明为全局变量（更安全、无需编解码）：<pre class="brush:php;toolbar:false;"><script> window.tagFilterList = <?php echo json_encode($tag_filter_list, JSON_HEX_TAG | JSON_HEX_AMP); ?>; </script></pre></script>
通过 URL 编码这一轻量级适配，你既能复用熟悉的隐藏域模式，又能确保任意深度的嵌套对象数组在前后端间精准传递——这是兼顾兼容性与可靠性的经典实践。
