使用XMLHttpRequest POST提交表单数据至MySQL时，FormData为空且$_POST无法获取数据的问题排查

嘿，我来帮你捋清楚问题出在哪——你遇到的这两个问题（控制台看不到FormData内容、后端$_POST为空）其实是两个独立但关联的小错误，咱们一个个解决：

1. 错误设置Content-Type请求头是核心问题 #

你手动添加了这行代码：

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

这是导致后端$_POST取不到值的关键！

当你使用new FormData(form)创建表单数据对象时，浏览器会自动处理请求头：它会把Content-Type设置为multipart/form-data，并且自动生成正确的边界标识（用来分隔不同表单字段的字符串）。而你手动设置的application/x-www-form-urlencoded是普通表单提交的编码类型，和FormData的编码格式不匹配，后端PHP无法正确解析这个请求，自然$_POST就是空的。

解决方法：直接删掉这行请求头设置代码。

2. console.log(data)看不到内容是正常现象 #

FormData对象并不是普通的JSON对象，它是一个不可直接枚举的迭代器，所以直接用console.log(data)只能看到一个空的FormData原型，看不到里面的键值对。

如果想查看FormData里的内容，可以用循环遍历或者转换为数组：

// 方法1：遍历键值对
for (let [key, value] of data) {
  console.log(`${key}: ${value}`);
}

// 方法2：转换为二维数组
console.log(Array.from(data.entries()));

修正后的前端代码 #

把错误的请求头去掉后，你的代码应该是这样的：

const form = document.querySelector('#pricing'); 
form.addEventListener('submit', (event) => { 
    event.preventDefault(); 
    const xhr = new XMLHttpRequest(); 
    xhr.open('POST', 'forms/pricing.php'); 
    let data = new FormData(form); 
    // 只保留X-Requested-With头即可
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); 
    xhr.send(data); 
    // 现在可以正确查看FormData内容了
    for (let [key, value] of data) {
      console.log(`${key}: ${value}`);
    }
    xhr.onload = () => { 
        console.log(xhr.responseText); 
    } 
});

这样修改后，后端的$_POST["fromDate"]应该就能正确获取到表单里的值，不会再用默认的'1'了。

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