Javascript formData 对象不适用于 jquery AJAX 帖子？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32421527/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
formData object not working with jquery AJAX post?
提问by noa-dev
lets jump right into the code :
让我们直接进入代码：
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);
Here I am appending some strings and one file object to the formData object in order to send all the information asynchronous to the server.
在这里，我将一些字符串和一个文件对象附加到 formData 对象，以便将所有信息异步发送到服务器。
Right after that I have this jquery ajax request :
在那之后，我有这个 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(){
}
});
So here I am trying to POST the info to the server, on the server php file I have a simple print_r of the POST so I see what gets through and what not.
所以在这里我试图将信息 POST 到服务器，在服务器 php 文件上我有一个简单的 POST 打印_r，所以我看看什么通过，什么不通过。
Unfortunately my response in the console.log(data) is empty.
不幸的是，我在 console.log(data) 中的响应是空的。
Also if you check the HEADER in the Network tab you get the following empty output:
此外，如果您检查 Network 选项卡中的 HEADER，您将获得以下空输出：
Success function gets called (just for clarification)
成功函数被调用（只是为了澄清）
回答by Viktor Bahtev
When you're sending an ajax request via jQuery and you want to send FormData you don't need to use JSON.stringifyon this FormData. Also when you're sending file the content type must be multipart/form-dataincluding boundry- something like this multipart/form-data; boundary=----WebKitFormBoundary0BPm0koKA
当您通过 jQuery 发送 ajax 请求并且想要发送 FormData 时，您不需要JSON.stringify在此 FormData上使用。此外，当您发送文件时，内容类型必须multipart/form-data包括boundry- 类似这样的multipart/form-data; boundary=----WebKitFormBoundary0BPm0koKA
So to send FormData including some file via jQuery ajax you need to:
因此，要通过 jQuery ajax 发送包含一些文件的 FormData，您需要：
- Set
datato the FormData without any modifications. - Set
processDatatofalse(Lets you prevent jQuery from automatically transforming the data into a query string). - Set the
contentTypetofalse(This is needed because otherwise jQuery will set it incorrectly).
data无需任何修改即可设置为 FormData。- 设置
processData为false（让您防止 jQuery 自动将数据转换为查询字符串）。 - 设置
contentType为false（这是必需的，否则 jQuery 会错误地设置它）。
Your request should look like this:
您的请求应如下所示：
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);
}
});
回答by Basheer AL-MOMANI
if you did exactly as pervious anwswer and still not working
dont worry its working
如果你完全按照之前的答案做了但仍然无法正常工作，请不要担心 its working
maybe intelligence and quick wathare telling you its not working
也许intelligence and quick wath告诉你它not working
but dont worry, look at network tap
不过别担心，看看 network tap
its working
它的工作
hope this saves your time
希望这可以节省您的时间
回答by ajinkya
//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);
