本文详解为何直接用json_encode()输出到html隐藏域会导致json解析失败，并提供使用urlencode()与decodeuricomponent()组合方案，确保多维对象数组在php与javascript间完整、安全传输。
在Web开发中，常需将PHP后端构造的复杂数据（如嵌套对象数组）传递至前端JavaScript处理。一个常见做法是借助承载JSON字符串，再由jQuery读取并解析。但若直接使用json_encode()输出到HTML属性值中，极易引发语法错误——正如问题中出现的 Uncaught SyntaxError: Expected property name or '}' in JSON at position 2。
根本原因在于：HTML属性值默认以双引号（"）界定，而json_encode()生成的标准JSON字符串同样使用双引号包裹键名和字符串值。例如：
<?php echo json_encode(['project28' => 'deer browse']); ?>
// 输出：{"project28":"deer browse"}当该结果直接插入value属性时：
<input type="hidden" id="tag_filter_list" value="{"project28":"deer browse"}">HTML解析器会将第一个"之后的内容截断——即value实际只取到 {，后续字符被当作标签属性或文本内容丢弃。因此$('#tag_filter_list').val()返回的只是一个孤立的{，自然无法被JSON.parse()识别。
立即学习“前端免费学习笔记（深入）”；
✅ 正确解决方案：双重编码 + 双重解码
在PHP端对JSON字符串进行URL编码，确保所有特殊字符（尤其是双引号、花括号、冒号等）被安全转义；前端读取后再解码还原为合法JSON字符串，再解析。
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 encodedJson = $('#tag_filter_list').val();
try {
const tagFilterList = JSON.parse(decodeURIComponent(encodedJson));
console.log(tagFilterList);
// 输出示例：
// [
// {"project28": "deer browse"},
// {"project28": "regeneration"},
// ...
// ]
} catch (e) {
console.error('JSON解析失败：', e.message);
}⚠️ 注意事项：
- 不要使用htmlspecialchars()替代urlencode()——它会转义成HTML实体（如"），decodeURIComponent()无法识别；
- 避免手动拼接JSON字符串，始终依赖json_encode()保证PHP数据结构合法性；
- 若数据量极大，建议改用data-*属性或AJAX异步加载，避免隐藏域臃肿影响页面性能；
- 始终在JSON.parse()外包裹try...catch，增强健壮性。
该方案简洁、兼容性好（支持所有现代浏览器），且无需引入额外库，是前后端结构化数据传递的经典实践。
