json数据结构需与html表单name属性严格对齐，name用点号表示嵌套路径（如"api.timeout"），禁用class/id作键，数组用"key[]"，disabled字段不提交，应改用readonly+hidden，须用formdata配合自定义解析器生成嵌套json。
JSON 数据结构必须与 HTML 表单字段名严格对齐
HTML 表单本身不“知道”组件配置，它只提交 name 和 value。想让 JSON.stringify() 输出有意义的配置，就得让每个可配置项（比如开关、下拉选项、输入框）的 name 属性直接对应 JSON 的键路径。例如：<input name="api.timeout"> 会映射为 {"api": {"timeout": "1000"}}，而不是扁平的 {"api.timeout": "1000"} —— 后者需要额外解析逻辑。
常见错误是用类名或 ID 当配置键：class="theme-color" 或 id="slider-1" 都无法被自动提取进 JSON。必须显式写 name="theme.color"，且注意点号层级不能含空格或特殊字符。
- 推荐用
name="ui.header.show"而非name="ui-header-show"，避免后续拆分逻辑 - 数组型配置（如多选标签）要用
name="features[]"，浏览器原生支持多个同名值转数组 - 禁用字段（
disabled）不会提交，若需保留默认值，改用readonly+ 隐藏<input type="hidden">
用 FormData + 自定义解析器替代直接 serialize()
浏览器原生的 form.serialize()（jQuery）或 new URLSearchParams(form) 都只产出扁平键值对，没法生成嵌套 JSON。正确做法是先用 new FormData(form) 获取原始数据，再写一个轻量解析器按点号分割 name 构建树结构。
示例解析逻辑核心：
function formToConfig(form) {
const data = new FormData(form);
const config = {};
for (const [key, value] of data.entries()) {
const parts = key.split('.');
let target = config;
for (let i = 0; i <p>注意：<code>entries()</code> 对 checkbox 未勾选时完全不返回该 <code>name</code>，所以“关闭”状态必须靠初始 JSON 合并，或加 hidden input 固定兜底值。</p><h3>处理类型转换：字符串值 ≠ 配置类型</h3><p><code>FormData</code> 所有值都是字符串，但配置里常需布尔、数字、数组甚至 null。不能依赖 <code>JSON.parse()</code> 直接转——它不处理类型推断。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
- 布尔字段建议用
<input type="checkbox" name="debug" value="true">，解析时判断value === "true" - 数字字段加
data-type="number"属性，解析器读到就调Number(value)，失败则保留原字符串或设为NaN - JSON 字段（如自定义样式对象）用
<textarea name="style.custom">{"color":"#333"}</textarea>，解析时尝试JSON.parse(value)，捕获异常后留空或报错
漏做类型转换会导致后端收到 "false" 字符串却当成真值，或 "123" 被当字符串而非整数——这类 bug 很难 debug。
动态组件增删时，name 属性必须实时更新
用 JS 动态添加配置项（如“添加 API endpoint”按钮），新生成的 <input> 如果没设 name，或者用了固定值如 name="endpoint"，序列化时就会覆盖或丢失数据。
安全做法是生成带索引的 name：name="endpoints.0.url"、name="endpoints.0.timeout"，删除某组时，要重排所有后续项的索引，或改用数组 push 模式（name="endpoints[]" + 多个同名字段）。
容易踩的坑：
- 用
innerHTML += ...插入新字段 → 新字段没绑定事件，name可能重复或缺失 - 删除 DOM 后没清理关联的 JS 状态 → 序列化时仍读到旧缓存
- 富文本编辑器等第三方组件不走标准表单流 → 必须手动同步其内容到隐藏
<input name="content">
真正麻烦的不是序列化本身，而是让 HTML 结构、JS 状态、用户操作三者始终对齐。name 是唯一锚点，动它就要动全局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
