AJAX原生JS发送POST：如何去除Boundary与Content-Disposition格式问题

问题根源：直接将FormData传入send()并手动设置Content-Type: application/x-www-form-urlencoded时，浏览器仍会默认采用multipart/form-data格式（带Boundary分段），导致PHP无法将请求体解析为预期的键值对数组。

以下两种方法可以生成标准的application/x-www-form-urlencoded格式请求，让PHP的$_POST正常解析：

方法一：手动拼接querystring #

手动将表单数据编码为键值对字符串，确保格式符合要求：

// 定义表单数据
const formData = {
  fName: 'John',
  lName: 'Doe'
};

// 拼接为标准querystring
const queryString = Object.keys(formData)
  .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(formData[key])}`)
  .join('&');

// 发起AJAX请求
const xhr = new XMLHttpRequest();
xhr.open('POST', 'your-handler.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

xhr.onload = function() {
  if (this.status >= 200 && this.status < 300) {
    console.log('响应:', this.responseText);
  } else {
    console.error('请求失败');
  }
};

xhr.send(queryString);

方法二：使用URLSearchParams（推荐） #

利用浏览器原生API自动转换格式，更简洁且不易出错：

// 构造表单数据（支持FormData或普通对象）
const formData = new FormData();
formData.append('fName', 'John');
formData.append('lName', 'Doe');

// 转换为URLSearchParams
const params = new URLSearchParams(formData);

// 发起AJAX请求
const xhr = new XMLHttpRequest();
xhr.open('POST', 'your-handler.php', true);
// 无需手动设置Content-Type，浏览器会自动添加正确的头部

xhr.onload = function() {
  if (this.status >= 200 && this.status < 300) {
    console.log('响应:', this.responseText);
  } else {
    console.error('请求失败');
  }
};

xhr.send(params);

PHP端处理 #

无需额外配置，直接通过$_POST['fName']、$_POST['lName']获取值，$_POST数组会自动解析为：

Array(
  'fName' => 'John',
  'lName' => 'Doe'
)

内容的提问来源于stack exchange，提问作者atesin