HTML 异步表单提交怎么使用 Fetch API 发送数据-H5教程-PHP中文网

用 fetch api 提交表单需阻止默认行为，用 formdata（含文件）或 json（纯文本）构造请求体，fetch 自动设 content-type；响应需检查 response.ok 并处理错误，成功后可重置表单。

html 异步表单提交怎么使用 fetch api 发送数据

用 Fetch API 提交表单无需刷新页面，核心是阻止表单默认提交行为，再用 fetch() 发送数据。关键在于正确构造请求体（如 FormData 或 JSON），并处理响应。

阻止默认提交并捕获表单数据

给表单添加 submit 事件监听器，调用 event.preventDefault() 阻止跳转。然后用 new FormData(form) 自动收集所有字段值，包括文件输入：

确保表单有 id 或能被选中（如 document.querySelector('form')）
FormData 会按 name 属性键名组织数据，后端可直接解析 multipart 或 urlencoded 格式
若需发送 JSON，手动提取字段拼成对象，再用 JSON.stringify()

用 Fetch 发送 FormData（推荐用于含文件的表单）

直接将 FormData 实例传给 fetch() 的 body，浏览器自动设置正确的 Content-Type（含 boundary）：

Markdown to HTML

{"answer":"将 Markdown 转换为内嵌 CSS、样式精美的独立 HTML。完美适用于新闻简报、文档、报告及邮件模板。"}

下载

fetch('/api/submit', {
  method: 'POST',
  body: formData // 不要手动设 headers，否则可能破坏 multipart 结构
});

服务端需支持 multipart/form-data 解析（如 Express 配 multer）
如仅传文本字段，也可用 application/x-www-form-urlencoded，但需自行转换：new URLSearchParams(formData).toString()

用 Fetch 发送 JSON（适合纯数据接口）

先构建 JavaScript 对象，再序列化，并显式设置请求头：

const data = {
  username: form.username.value,
  email: form.email.value
};
fetch('/api/submit', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(data)
});

后端需解析 JSON（如 Express 中用 express.json() 中间件）
注意：FormData 无法直接转为 JSON，含文件时必须用 multipart 方式

处理响应与错误

Fetch 只在网络失败时 reject，HTTP 错误状态（如 400、500）仍进入 then。建议检查 response.ok 并解析结果：

fetch('/api/submit', { method: 'POST', body: formData })
  .then(response => {
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return response.json(); // 或 response.text()
  })
  .then(data => console.log('成功:', data))
  .catch(err => console.error('提交失败:', err));