上一篇
fromjs提交的正确方法是什么，操作步骤有哪些？
从 JavaScript 提交表单
表单提交是 Web 开发中常见的操作，传统方式依赖 HTML 的 action 和 method 属性，但现代开发更倾向于使用 JavaScript 控制提交过程，实现无刷新页面、数据预处理、异步上传等需求。
传统提交方式
使用 <form> 标签的 submit 事件或 action 属性,浏览器会构建请求并跳转页面。
<form action="/submit" method="POST"> <input name="username" /> <input type="submit" value="提交" /> </form>
- 优点：简单直接,无需额外代码。
- 缺点：会刷新页面,无法进行客户端验证或自定义异步处理。
使用 JavaScript 提交
通过 submit() 方法
在表单元素上调用 submit() 方法可以触发提交，但不会触发 submit 事件。
- 适用于想绕过事件监听直接提交的场景。
通过 FormData 与 fetch
创建 FormData 对象，将表单数据序列化，然后使用 fetch 发送异步请求。
const form = document.getElementById('myForm'); form.addEventListener('submit', async (e) => { e.preventDefault(); // 阻止默认提交 const formData = new FormData(form); try { const response = await fetch('/submit', { method: 'POST', body: formData }); const result = await response.json(); console.log(result); } catch (error) { console.error('提交失败', error); } });
- 优点：无刷新、可处理 JSON/文件上传、支持 Promise。
- 注意：FormData 会自动捕获表单中的输入字段。
使用 XMLHttpRequest
传统异步请求方式,适合需要兼容旧浏览器的场景。
const form = document.getElementById('myForm'); form.addEventListener('submit', (e) => { e.preventDefault(); const xhr = new XMLHttpRequest(); xhr.open('POST', '/submit'); xhr.onload = () => { console.log(xhr.responseText); }; const formData = new FormData(form); xhr.send(formData); });
手动构建 JSON 数据
有时需要将表单数据转换为 JSON 格式发送。
表单验证与提交控制
在提交前进行客户端验证,减少无效请求。
| 验证方式 | 示例 | 说明 |
|---|---|---|
| HTML5 验证 | <input required> | 浏览器内置验证，可配合 reportValidity() |
| JavaScript 验证 | if (!input.value) { ... } | 灵活自定义规则 |
| 实时验证 | input.addEventListener('input', ...) | 用户输入时即时反馈 |
- 调用 e.preventDefault() 阻止默认提交,实现自定义逻辑。
- 使用 form.checkValidity() 检测所有字段是否通过 HTML5 验证。
跨域提交与数据安全
- 跨域请求需服务端配置 CORS 头。
- 敏感信息建议使用 HTTPS 并添加 csrf 令牌。
- 文件上传需设置 enctype="multipart/form-data"，FormData 会自动处理。
常见问题与最佳实践
- 多次提交：提交后禁用按钮,防止重复请求。
- 文件上传进度：使用 XMLHttpRequest 的 upload.onprogress 事件。
- 表单重置：form.reset() 清空所有字段。
- 序列化表单：除 FormData 外，也可用 new URLSearchParams(new FormData(form)) 生成 URL 编码字符串。
相关问题与解答
问题1：使用 FormData 提交时，如何获取上传进度？
答：fetch 目前不支持原生进度监听，若需进度反馈，建议使用 XMLHttpRequest 的 upload 事件,示例：
const xhr = new XMLHttpRequest(); xhr.upload.onprogress = (e) => { if (e.lengthComputable) { const percent = (e.loaded / e.total) 100; console.log(`上传进度：${percent}%`); } }; xhr.open('POST', '/upload'); xhr.send(formData);
问题2：阻止表单默认提交后，如何判断用户是否使用了 required 属性？
答：可以使用 form.checkValidity() 方法，它返回 true 或 false，并触发浏览器的验证气泡，如果想手动逐个检查，也可以用 element.validity.valid 属性,示例：
form.addEventListener('submit', (e) => { e.preventDefault(); if (!form.checkValidity()) { // 显示错误提示或高亮非法字段 form.reportValidity(); // 展示浏览器默认错误信息 return; } // 验证通过，继续提交 });
