javascript - formData 对象不适用于 jquery AJAX post？

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(){
  }
});

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

不幸的是，我在 console.log(data) 中的响应是空的。

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

成功函数被调用(只是为了说明)

Answer 1

当您通过 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);
    }
});