必须禁用原生提交，改用fetch手动构造json payload：显式提取字段、归一化类型（number/date/checkbox等）、注入元数据、设content-type: application/json并json.stringify(body)，启用keepalive与signal超时。
表单提交时如何避免日志字段被截断或解析失败
HTML 表单默认以 application/x-www-form-urlencoded 编码提交，但日志系统通常要求 JSON 结构化 Payload。直接用 form.submit() 会丢失字段层级、丢弃空值、无法携带元数据（如 trace_id、client_ip），导致后续解析失败或字段错位。
- 必须禁用原生提交，改用
fetch或XMLHttpRequest手动构造 Payload - 所有表单字段需显式提取，不能依赖
new FormData(form)—— 它不保留空字符串、不处理嵌套 name（如user[name]） - 对 checkbox / multi-select 需统一转为数组，避免后端收到
"on"或undefined - 关键字段（如
timestamp、session_id）应在 JS 层生成并注入，而非依赖服务端补全
如何把 input 和 select 值安全映射为 JSON 字段
浏览器原生表单控件的 value 类型混乱：number 输入框返回字符串、date 返回 ISO 字符串、checkbox 返回布尔但未勾选时无值。不做归一化会导致日志中同一字段类型漂移（string / number / null 混用），破坏 ES 或 ClickHouse 的 schema 推断。
- 对
type="number"，用parseFloat(input.value) || null强制转数字，避免"0"被当字符串 - 对
type="date"，校验格式后再透传，不依赖input.valueAsDate（IE 不支持） - 对
<select multiple></select>，用Array.from(select.selectedOptions).map(o => o.value)，确保始终是数组 - 对 disabled 控件，显式取
input.hasAttribute('disabled')并写入"disabled": true字段，而非忽略
fetch 提交时 Content-Type 和 body 的正确组合
日志采集接口几乎都要求 Content-Type: application/json，但若 body 是 JSON.stringify() 后的字符串而 header 写成 text/plain，Nginx 或网关可能拒绝或静默丢弃请求。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- header 必须严格设为
{ 'Content-Type': 'application/json' }，不能漏掉charset=utf-8（虽非必需，但避免某些旧中间件误判） - body 必须是
JSON.stringify(payload)，不能传对象——否则 fetch 会自动序列化为 query string - 务必设置
keepalive: true，防止页面跳转/关闭导致请求被中止（尤其在 SPA 中） - 添加
signal超时控制（如 3s），避免日志上报阻塞主流程
为什么不能复用表单验证逻辑来构造日志 Payload
表单验证关注用户交互反馈（如“邮箱格式错误”），而日志结构化关注字段完整性与语义一致性。两者目标不同，强行复用会导致字段缺失、冗余或污染。
-
required属性只影响 submit 可用性，不保证字段存在——JS 提取时仍需 fallback 到空字符串或 null - 自定义验证规则（如正则）常含业务逻辑（如手机号区号校验），不应混入日志字段；日志只需原始输入值
- 使用
form.reportValidity()后再提交，会掩盖真实用户输入（如用户故意留空某非必填字段），破坏数据真实性 - 日志字段名应与后端 schema 严格对齐，不能照搬 HTML
name（如user_emailvsuser.email）
真正难的不是序列化，而是字段语义对齐和边缘状态覆盖——比如用户快速切换 radio 后立即提交，change 事件可能未触发，得靠 input 事件 + 防抖兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
