表单 submit 事件默认行为必须显式阻止，否则触发页面跳转导致状态丢失；fetch 提交需保留字段值与校验态、正确处理 csrf 和文件上传、同步维护 history 状态。
表单 submit 事件默认行为必须显式阻止
不调用 event.preventDefault()，浏览器会执行传统页面跳转或刷新，所有前端状态瞬间丢失。这是无刷新提交失败的最常见原因，不是“没写对”，而是根本没写。
实操建议：
- 在
form.addEventListener('submit', handler)的handler第一行就加event.preventDefault() - 不要依赖
return false—— 它在现代事件监听中不等价于阻止默认行为和停止冒泡 - 如果用了 jQuery，
$('form').on('submit', function(e) { e.preventDefault(); })同样有效，但原生更可控
fetch 提交后如何保持表单字段值与校验状态
提交成功后清空表单是反模式。用户可能想修改部分字段重试，或刚填完就切走又回来——此时字段应原样保留，且错误提示（如 input.reportValidity() 触发的红框）不能消失。
实操建议：
- 提交前用
form.elements或new FormData(form)读取数据，而非直接清空form.reset() - 服务端返回校验失败时，把
errors字段映射回对应input[name]，用element.setCustomValidity(message)恢复校验态 - 避免手动设
value属性：改input.value（DOM 属性），而非input.setAttribute('value', ...)，后者会覆盖初始值逻辑
CSRF token 和文件上传在 fetch 中容易漏掉的配置
传统表单提交自动携带 cookie 和 multipart/form-data 头；fetch 默认不带 cookie，且 FormData 对象需手动传入，否则后端收不到 token 或文件。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
实操建议：
- 必须加
credentials: 'include'才能发送 cookie（含 CSRF token） - 文件上传必须用
new FormData(form)构造体，不能 JSON.stringify —— 后者会丢文件、破坏 boundary - 不要手动设
Content-Type：fetch 遇到FormData会自动设置为multipart/form-data并生成正确 boundary；手动设置反而导致后端解析失败
history.pushState 与表单状态耦合时的坑
用户点击浏览器后退按钮时，若只靠 URL 变化还原表单，但没保存字段值或校验态，就会回到一个“干净但错误”的空表单，丢失全部上下文。
实操建议：
- 提交成功后调用
history.pushState({ formData: savedData, errors: [] }, '', url)，把关键状态存进 state - 监听
popstate事件，在回调里用event.state.formData填充字段，并调用input.reportValidity()触发已有校验 - 注意：
pushState不触发页面刷新，但replaceState更适合表单编辑场景——避免用户连点多次后退进入历史死循环
真正难的不是发请求，而是让表单像没提交过一样继续存在。字段值、校验红框、文件预览、错误提示、URL 状态——这些都要同步维护，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
