JavaScript中用fetch发送表单数据，推荐用FormData自动序列化（支持文件），纯文本则用URLSearchParams手动拼接x-www-form-urlencoded；二者均无需第三方库，且内置编码处理。
JavaScript 中用 fetch 发送表单数据，核心是把表单元素转成键值对（即“序列化”），再根据接口要求选择 application/x-www-form-urlencoded 或 multipart/form-data 方式提交。不需要引入第三方库，原生 API 就够用。
用 FormData 自动序列化（推荐用于含文件的表单）
FormData 对象能自动收集表单中所有字段（包括 <input type="file">），无需手动拼接，且天然适配 multipart/form-data。
- 直接传入表单 DOM 元素：
new FormData(formElement) - fetch 的
body直接传这个对象，浏览器会自动设置正确的Content-Type（含 boundary） - 服务端按 multipart 解析即可，不用手动处理编码
示例：
<form id="myForm"><input name="username" value="Alice">
<input type="file" name="avatar">
</form>
const form = document.getElementById('myForm');<br>const formData = new FormData(form);<br><br>fetch('/api/submit', {<br> method: 'POST',<br> body: formData // 自动处理编码和 headers<br>});
立即学习“Java免费学习笔记（深入）”；
手动拼接 x-www-form-urlencoded（适合纯文本字段）
如果表单只含文本字段（无文件），且后端明确要求 application/x-www-form-urlencoded，可用 URLSearchParams 构造请求体。
- 从表单获取数据：遍历
form.elements，过滤掉禁用项、空值、非提交字段 - 用
URLSearchParams收集键值对，再转成字符串 - 手动设置
Content-Type: application/x-www-form-urlencoded
示例：
<form id="loginForm"><input name="email" value="a@example.com">
<input name="password" value="123">
</form>
const form = document.getElementById('loginForm');<br>const params = new URLSearchParams();<br><br>for (const field of form.elements) {<br> if (field.name && !field.disabled && ['text', 'email', 'password'].includes(field.type)) {<br> params.append(field.name, field.value);<br> }<br>}<br><br>fetch('/api/login', {<br> method: 'POST',<br> headers: { 'Content-Type': 'application/x-www-form-urlencoded' },<br> body: params.toString()<br>});
注意点与常见问题
-
不要混用 FormData 和手动设置 Content-Type：一旦用了
FormData，就别设Content-Type，否则会覆盖浏览器自动生成的带 boundary 的 header -
checkbox/radio 要检查是否被选中：未选中的不会自动加入
FormData，但手动拼接时需显式判断field.checked - 中文或特殊字符无需额外 encode：URLSearchParams 和 FormData 内部已做编码，直接传原始值即可
- 避免重复提交：可在 fetch 前禁用提交按钮，或加 loading 状态防止多次点击
