input type="hidden" 不能直接传结构化数据，value 属性仅接受字符串，须 json.stringify() 后转义双引号，服务端需 json_decode()；或改用 fetch 发送原生 json。
直接用 input type="hidden" 传结构化数据？别硬塞
HTML 的 value 属性只接受字符串，强行把对象或数组 JSON 字符串塞进 value 看似可行，但极易出错：未转义的双引号会破坏 HTML 结构，服务端收到的是损坏文本而非合法 JSON；PHP 的 $_POST 里它永远是字符串，不会自动解析成数组。真正能走通的路径只有两个：input type="hidden" + 服务端 json_decode()，或彻底绕开表单提交、改用 fetch() 构造请求体。
input type="hidden" 的 value 必须转义，且仅限字符串
哪怕你传的是数字 123 或布尔 true，也得先转成字符串再设为 value。否则浏览器会忽略或截断。常见陷阱包括：
-
value含"、、<code>&时未用htmlspecialchars()（PHP）或encodeURI()（JS），导致 DOM 解析失败 - 用
print_r($arr)替代json_encode($arr)，后端拿到的是带换行缩进的调试文本，根本无法还原 - 多个同名隐藏域（如
name="tag"）被 PHP 自动合并为数组，但混用name="tag"和name="tag[]"会导致解析不可靠
需要动态行为参数？优先用 data- 属性 + JS 控制
如果参数是用来驱动前端逻辑（比如切换编辑模式、控制组件渲染、触发埋点），就别塞进 input——它本就不该承担这个职责。data- 属性才是标准解法：
- 写法：
<form data-editor-mode="markdown" data-cart-version="2.3"></form> - 读取：
form.dataset.editorMode（自动驼峰转换）、form.getAttribute('data-cart-version') - 优势：不参与表单提交、无 XSS 风险、语义清晰、可被 CSS 选择器匹配
表单提交必须带复杂参数？隐藏域只是载体，校验必须在服务端
input type="hidden" 不是保险箱，它只是个运输管道。用户打开 DevTools 两秒就能把 value="price:99" 改成 value="price:0.01"。所以：
- 价格、权限、状态码这类关键字段，只传 ID，金额/角色/枚举值由服务端查库得出
- CSRF token、时间戳、来源标记等字段，必须绑定当前会话并验证有效期与签名
- 所有
name对应的值，服务端都要做白名单校验（比如status只允许"draft"、"published"）
最容易被忽略的一点：前端 JS 动态更新 hidden 值时，常因事件绑定时机错误（如在 submit 事件末尾赋值）或框架响应式覆盖（Vue/React 中直接操作 DOM）导致提交的仍是旧值。务必在 submit 事件开头更新，并确认 DOM 已挂载、框架已同步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
