объект formData не работает с jQuery AJAX post?
позволяет перейти прямо в код :
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: formData,
processData: false,
contentType: false,
success: function(response){
console.log(response);
},
error: function(){
}
});
Итак, здесь я пытаюсь опубликовать информацию на сервере, на php-файле сервера у меня есть простой print_r сообщения, поэтому я вижу, что проходит, а что нет.
к сожалению, мой ответ в консоли.журнал (данные) пуст.
также, если вы проверите заголовок на вкладке Сеть, вы получите следующий пустой вывод:
функция успеха вызывается (только для уточнения)
3 ответов
когда вы отправляете запрос ajax через jQuery и хотите отправить FormData, вам не нужно использовать JSON.stringify
на этой FormData. Кроме того, при отправке файла тип содержимого должен быть multipart/form-data
в том числе boundry
- что-то вроде этого multipart/form-data; boundary=----WebKitFormBoundary0BPm0koKA
поэтому для отправки FormData, включая некоторый файл через jQuery ajax, вам нужно:
- Set
data
в FormData без каких-либо изменений. - Set
processData
tofalse
(позволяет предотвратить jQuery от автоматическое преобразование данных в строку запроса). - установить
contentType
tofalse
(это необходимо, потому что в противном случае 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);
}
});
//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);