web-dev-qa-db-fra.com

l'objet formData ne fonctionne pas avec jQuery AJAX poster?

permet de sauter directement dans le 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);

Ici, j'ajoute des chaînes et un objet fichier à l'objet formData afin d'envoyer toutes les informations de manière asynchrone au serveur.

Juste après, j’ai cette requête 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(){
  }
});

Donc ici je suis en train d'essayer de POST les informations au serveur, sur le fichier php du serveur, j'ai un simple print_r du POST afin de voir ce qui passe et ce qui ne passe pas.

Malheureusement, ma réponse dans le fichier console.log (données) est vide. 

De même, si vous cochez la case HEADER dans l'onglet Network, vous obtenez le résultat vide suivant:

 enter image description here

La fonction de succès est appelée (juste pour clarification)

javascriptjqueryajaxform-data
10
noa-dev

Lorsque vous envoyez une demande ajax via jQuery et que vous souhaitez envoyer FormData, vous n'avez pas besoin d'utiliser JSON.stringify sur cette FormData. De plus, lorsque vous envoyez un fichier, le type de contenu doit être multipart/form-data, y compris boundry - quelque chose comme ceci multipart/form-data; boundary=----WebKitFormBoundary0BPm0koKA

Donc, pour envoyer FormData avec un fichier via jQuery ajax, vous devez:

  • Définissez data sur le FormData sans aucune modification.
  • Définissez processData sur false (vous empêche d'empêcher jQuery de transformer automatiquement les données en chaîne de requête).
  • Définissez contentType sur false (nécessaire, sinon jQuery ne le définira pas correctement).

Votre demande devrait ressembler à ceci:

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);
    }
});
16
Viktor Bahtev

si vous faites exactement la même chose et que vous ne travaillez toujours pas ne vous inquiétez pas its working 

peut-être que intelligence and quick wath vous dit que son not working 

 enter image description here

mais ne vous inquiétez pas, regardez network tap enter image description here

ça marche 

espérons que cela vous fera gagner du temps

4
Basheer AL-MOMANI
//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);
0
ajinkya