如何在HTML隐藏字段中安全传递JSON编码的数组对象给jQuery

本文讲解如何正确使用php的json_encode()将多维数组转为json字符串，并通过html隐藏字段安全传递给前端javascript，避免因双引号冲突导致json.parse()解析失败的问题。

在Web开发中，常需将后端生成的结构化数据（如对象数组）传递至前端javaScript进行动态处理。一个常见做法是借助承载json字符串，再由jquery读取并解析。但直接使用json_encode()输出到value属性中极易引发语法错误——原因在于：html属性值本身以双引号（或单引号）界定，而JSON字符串内部也大量使用双引号，导致HTML解析提前截断内容。

例如，php代码：

<input type="hidden" value="" />

若$tag_filter_list编码后为 {“project28″:”deer browse”}，实际渲染的HTML将变为：

此时浏览器仅将第一个”之后、下一个”之前的内容（即 {）识别为value属性值，后续字符被当作非法HTML标记丢弃。因此$(‘#tag_filter_list’).val()只返回”{，JSON.parse()自然抛出 SyntaxError: Expected Property name or ‘}’。

立即学习“前端免费学习笔记（深入）”；

✅ 正确解决方案：双重编码 + 解码

1. PHP端：先 JSON 编码，再 URL 编码
   使用 urlencode() 对 json_encode() 结果做安全转义，确保所有特殊字符（尤其是双引号”、花括号{}、冒号:等）均转换为URL安全格式：

2. 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属性时的格式冲突问题，让前后端数据传递既安全又可靠。