formData 对象不适用于 jquery AJAX 帖子？

Question

让我们直接进入代码：

var formData = new FormData();

formData.append('name', dogName);
formData.append('weight', dogWeight);
formData.append('activity', dogActivity);
formData.append('age', dogAge);
formData.append('file', document.getElementById("dogImg").files[0]);
console.log(formData);

这里我将一些字符串和一个文件对象附加到 formData 对象，以便将所有信息异步发送到服务器。

之后我有这个 jquery ajax 请求：

$.ajax({
  type: "POST",
  url: "/foodoo/index.php?method=insertNewDog",
  data: JSON.stringify(formData),
  processData: false,  // tell jQuery not to process the data
  contentType: "multipart/form-data; charset=utf-8",
  success: function(response){
     console.log(response);
  },
  error: function(){
  }
});

所以我在这里尝试将信息 POST 到服务器，在服务器 php 文件上我有一个简单的 POST print_r，所以我可以看到什么通过，什么不通过。

很遗憾，我在 console.log(data) 中的回复是空的。

此外，如果您检查“网络”选项卡中的 HEADER，您会得到以下空输出：

成功函数被调用（只是为了澄清）

Answer 1

//For those who use plain javascript

var form = document.getElementById('registration-form'); //id of form
var formdata = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.open('POST','form.php',true);
// xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
//if you have included the setRequestHeader remove that line as you need the 
// multipart/form-data as content type.
xhr.onload = function(){
 console.log(xhr.responseText);
}
xhr.send(formdata);

Answer 2

如果您完全按照之前的回答进行了操作，但仍然无法正常工作 别担心its working

也许intelligence and quick wath 告诉你它的not working

不过别担心，看network tap

它的工作原理

希望这可以节省您的时间

Answer 3

当您通过 jQuery 发送 ajax 请求并且想要发送 FormData 时，您不需要在此 FormData 上使用 JSON.stringify。此外，当您发送文件时，内容类型必须是 multipart/form-data，包括 boundry - 类似于 multipart/form-data; boundary=----WebKitFormBoundary0BPm0koKA

因此，要通过 jQuery ajax 发送包含一些文件的 FormData，您需要：

• 将data 设置为FormData，无需任何修改。
• 将processData 设置为false（可以防止jQuery 自动将数据转换为查询字符串）。
• 将contentType 设置为false（这是必需的，否则jQuery 会错误地设置它）。

您的请求应如下所示：

var formData = new FormData();

formData.append('name', dogName);
// ... 
formData.append('file', document.getElementById("dogImg").files[0]);


$.ajax({
    type: "POST",
    url: "/foodoo/index.php?method=insertNewDog",
    data: formData,
    processData: false,
    contentType: false,
    success: function(response) {
        console.log(response);
    },
    error: function(errResponse) {
        console.log(errResponse);
    }
});