data-*属性的值不会自动提交至后台，必须手动提取并加入请求体；需经类型校验与编码处理以确保安全与正确性，其本质是dom数据容器而非传输通道。
data-* 属性的 value 不会自动提交给后台
HTML 的 data-* 属性只是自定义存储数据的容器，浏览器不会把它当表单字段发送。你点提交按钮、发 fetch 或 XMLHttpRequest，它压根不参与序列化——除非你手动读取并拼进请求体里。
常见错误现象：document.querySelector('button[data-id="123"]').dataset.id 能读到 "123"，但后端收不到这个值，日志里查不到对应字段。
- 表单提交（
<form></form>）只上传name属性存在的控件（<input>、<select></select>等），data-*不算在内 - AJAX 请求必须显式提取：
const id = btn.dataset.id; formData.append('id', id); - 如果用
JSON.stringify()发数据，得先从 DOM 取值再塞进对象：{ id: element.dataset.userId, action: 'delete' }
怎么把 data-value 安全转成标准 POST 字段
别直接用 dataset.value 拼字符串，容易 XSS 或类型错乱。推荐统一走「取值 → 类型校验 → 绑定」三步。
使用场景：按钮带操作上下文（如删除某条记录），需要把 data-id 和 data-type 一起传给后端。
- 用
parseInt()或Number()处理数字类data-id，避免字符串 "123" 被后端当成文本处理 - 对
data-action这类枚举值，加白名单校验：['create', 'update', 'delete'].includes(action) - 若值含特殊字符（比如
data-token="abc+def"），用encodeURIComponent()编码后再塞进URLSearchParams或FormData - 示例：
const btn = document.querySelector('[data-action="delete"]');<br>const id = Number(btn.dataset.id);<br>if (isNaN(id)) throw new Error('Invalid data-id');<br>fetch('/api/item', {<br> method: 'POST',<br> body: JSON.stringify({ id, action: 'delete' })<br>});
data-value 和 hidden input 哪个更适合传参
看用途。临时状态或非用户输入数据（如当前页码、列表项索引）用 data-* 更轻量；要确保必传、且可能被后端强校验的字段，优先用 <input type="hidden">。
性能 / 兼容性影响：data-* 无渲染开销，但需 JS 主动读取；hidden input 会被表单原生收集，但多一个 DOM 节点、可能被误删或重复 name 冲突。
- 表单里混用时，
<input name="user_id" value="123">比<button data-user-id="123"></button>更可靠——尤其用户禁用 JS 时 - React/Vue 等框架里，
data-*常用于事件委托（event.target.dataset.id），而隐藏域更适合受控组件的 state 映射 - 注意：多个同名
hidden input会全部提交，而dataset只取第一个匹配元素的值
后端收到空 data-value 的常见原因
不是后端没写对，大概率前端取值时机或方式错了。最常踩的坑是 DOM 尚未加载完成就执行 dataset 读取，或用了错误的属性名。
-
data-user-id对应的 JS 属性是dataset.userId（连字符转驼峰），不是dataset.userid或dataset['user-id'] - 动态插入的元素（如通过
innerHTML添加），dataset在插入后才可读，不能在字符串拼接阶段预取 - 服务端解析 JSON 时，如果前端传的是字符串
"123"，而接口要求 number 类型，某些框架（如 Spring Boot）会静默失败或转成 0 - 检查 Network 面板的 Payload：如果根本没看到那个字段，说明前端根本没塞进去；如果字段存在但值为空，重点查
dataset是否为undefined或空字符串
实际项目里，data-* 是很好的上下文载体，但它不是传输通道——把它当便利贴用，别当快递单。真正要送出去的东西，还得亲手打包、贴单、发货。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
