JavaScript 中怎么使用 Ajax 结合 FormData 提交表单数据-js教程-PHP中文网

使用 formdata 配合 fetch 或 xmlhttprequest 发送表单是提交混合数据最稳妥方式；自动收集带 name 的字段，额外字段用 append 追加；fetch/xhr 会自动设置 multipart/form-data 及 boundary，切勿手动设 content-type；后端需启用 multipart 解析且字段名须严格匹配。

javascript 中怎么使用 ajax 结合 formdata 提交表单数据

直接用 FormData 配合 fetch 或 XMLHttpRequest 发送表单，是现代前端提交含文件、文本混合数据最稳妥的方式。关键在于不手动序列化数据，让浏览器自动处理边界和编码。

创建 FormData 并自动收集表单字段

只需传入表单 DOM 元素，FormData 会读取所有 name 属性的控件（包括 input[type=file]、textarea、select），无需逐个 append：

const form = document.querySelector('#myForm');
const data = new FormData(form); // 自动包含所有带 name 的字段

如果需要额外字段（如 token、状态标记），再单独追加：

data.append('csrf_token', 'abc123');
data.append('submit_type', 'save_draft');

用 fetch 提交（推荐）

fetch 默认识别 FormData，会自动设置正确的 Content-Type（multipart/form-data 及带 boundary），你不用管它：

fetch('/api/submit', {
  method: 'POST',
  body: data // 直接传 FormData 实例
})
.then(res => res.json())
.then(console.log);

注意：不要手动设置 Content-Type，否则浏览器无法生成 boundary，后端收不到文件或字段乱序。

java后端编程

专用于 Java Spring Boot 后端开发的专业技能。当用户提出以下需求时，应调用此技能：构建 REST API、创建 Spring Boot 项目、编写 Java 后端服务、配置数据库访问（JPA / MyBatis）、处理认证与授权（Spring Security / JWT）、实现微服务架构（Spring Cloud）、排查 Spring Boot 相关错误、审查 Java 代码质量，或执行任何与 Spring Boot / Java 后端相关的任务。

下载

用 XMLHttpRequest 提交（兼容旧环境）

写法稍多一步，但逻辑一致：

const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/submit');
xhr.onload = () => console.log(xhr.response);
xhr.send(data); // 同样直接传 FormData

同样禁止设置 Content-Type 请求头 —— xhr 在发送 FormData 时会自动覆盖它。

后端接收注意事项

后端框架（如 Express、Django、Spring）需启用 multipart 解析：

Express：用 multer 中间件
Django：request.POST（文本）和 request.FILES（文件）自动分离
PHP：$_POST 和 $_FILES 原生支持

字段名必须与前端 name 属性完全一致，大小写敏感，空格也不行。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南