JavaScript 中 Ajax 怎么发送 POST 请求提交表单数据-js教程-PHP中文网

javascript ajax post 提交表单需正确构造 body 并设置 content-type：fetch 推荐，formdata 自动处理 multipart，urlsearchparams 用于 x-www-form-urlencoded；xmlhttprequest 需手动 setrequestheader；字段名须与后端严格一致，上传文件必用 formdata，务必 preventdefault。

javascript 中 ajax 怎么发送 post 请求提交表单数据

用 JavaScript 的 Ajax 发送 POST 请求提交表单数据，核心是构造正确的请求体（body）并设置合适的请求头（Content-Type），同时确保后端能正确解析。

使用 `fetch` 提交表单数据（推荐）

fetch 是现代浏览器标准方式，简洁且支持 Promise。提交表单时需注意数据格式：

若后端接收 application/x-www-form-urlencoded（类似传统表单提交），用 URLSearchParams 序列化数据
若后端接收 application/json，需先将数据转为 JSON 字符串，并设置对应请求头

示例（发送键值对，服务端按普通表单解析）：

const formData = new FormData(document.querySelector('form'));
fetch('/submit', {
  method: 'POST',
  body: formData // 自动设置 Content-Type 为 multipart/form-data（含文件时）
});
// 或手动构造 x-www-form-urlencoded：
// const params = new URLSearchParams();
// params.append('username', 'Alice');
// params.append('email', 'a@example.com');
// fetch('/submit', {
//   method: 'POST',
//   headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
//   body: params
// });

用 `XMLHttpRequest` 手动发送（兼容旧环境）

适合需要精细控制或兼容 IE 的场景。关键点：调用 setRequestHeader 设置请求头，再调用 send 传入字符串或 FormData：

const xhr = new XMLHttpRequest();
xhr.open('POST', '/submit');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = () => {
  if (xhr.status === 200) console.log(xhr.responseText);
};
const data = 'username=Bob&email=b@example.com';
xhr.send(data);

上传文件时直接传 FormData 对象，无需设 Content-Type —— 浏览器会自动添加带 boundary 的 multipart 头。