formData object 不能与 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);

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

紧接着我有这个 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

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

Answer 2

如果你做的和之前的回答完全一样，但仍然没有工作别担心its working

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

不过别着急，看看network tap

正常工作

希望这可以节省您的时间

Answer 3

//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);

formData object 不能与 jquery AJAX post 一起使用？

formData object not working with jquery AJAX post?

javascript

ajax

jquery

form-data