本文讲解如何正确使用php的json_encode()将多维数组转为json字符串，并通过html隐藏字段安全传递给前端javascript，避免因双引号冲突导致json.parse()解析失败的问题。
在Web开发中，常需将后端生成的结构化数据（如对象数组）传递至前端JavaScript进行动态处理。一个常见做法是借助承载JSON字符串，再由jQuery读取并解析。但直接使用json_encode()输出到value属性中极易引发语法错误——原因在于：HTML属性值本身以双引号（或单引号）界定，而JSON字符串内部也大量使用双引号，导致HTML解析提前截断内容。
例如，PHP代码：
若$tag_filter_list编码后为 {"project28":"deer browse"}，实际渲染的HTML将变为：
此时浏览器仅将第一个"之后、下一个"之前的内容（即 {）识别为value属性值，后续字符被当作非法HTML标记丢弃。因此$('#tag_filter_list').val()只返回"{，JSON.parse()自然抛出 SyntaxError: Expected property name or '}'。
立即学习“前端免费学习笔记（深入）”；
✅ 正确解决方案：双重编码 + 解码
-
PHP端：先 JSON 编码，再 URL 编码
使用 urlencode() 对 json_encode() 结果做安全转义，确保所有特殊字符（尤其是双引号"、花括号{}、冒号:等）均转换为URL安全格式： -
JavaScript端：先解码，再解析
使用 decodeURIComponent() 还原原始JSON字符串，再交由 JSON.parse() 处理：const tagFilterList = JSON.parse(decodeURIComponent($('#tag_filter_list').val())); console.log(tagFilterList); // ✅ 正确输出数组对象
? 验证示例（浏览器控制台）：
// 假设 hidden input 的 value 是 "%7B%22project28%22%3A%22deer%20browse%22%7D"
const raw = $('#tag_filter_list').val(); // "%7B%22project28%22%3A%22deer%20browse%22%7D"
const decoded = decodeURIComponent(raw); // '{"project28":"deer browse"}'
const parsed = JSON.parse(decoded); // { project28: "deer browse" }⚠️ 注意事项：
- 不要使用 htmlspecialchars() 替代 urlencode() —— 前者针对HTML实体，不保证JSON语法完整性；
- 若数组含中文、空格、斜杠等字符，urlencode() 同样能可靠处理；
- 确保PHP端json_encode()未启用 JSON_UNESCAPED_UNICODE 以外的非常规选项，以免引入不可见控制字符；
- 更现代的替代方案（推荐用于新项目）：将数据内联为
通过 urlencode() + decodeURIComponent() 这一组合，即可在保持语义清晰的同时，彻底解决JSON嵌入HTML属性时的格式冲突问题，让前后端数据传递既安全又可靠。
