Comment transmettre à la fois des données FormData et String dans une requête JQuery AJAX ?

Comment envoyer à la fois des données de formulaire et des données de chaîne via JQuery AJAX ?

Lorsque vous travaillez avec des formulaires contenant à la fois des entrées de fichier et des champs de saisie masqués, vous pouvez rencontrer des difficultés à envoyer les deux ensembles de données ensemble à l’aide de FormData(). Cet article propose une solution à ce problème.

Dans FormData, vous pouvez ajouter des données de fichier à l'aide de la méthode fd.append("file", file_data). Cependant, pour inclure des données d'entrée masquées avec le fichier, vous devrez suivre les étapes suivantes :

1. Utilisez $('form').serializeArray() pour obtenir un tableau d'objets représentant chacun champ de saisie et sa valeur.
2. Parcourez le tableau et ajoutez le nom et la valeur de chaque champ à l'objet FormData à l'aide de fd.append(input.name,input.value).

Par exemple, considérons le code HTML :

<code class="html"><form action="image.php" method="post" enctype="multipart/form-data">
  <input type="file" name="file[]" multiple="">
  <input type="hidden" name="page_id" value="<?php echo $page_id; ?>"/>
  <input type="hidden" name="category_id" value="<?php echo $item_category->category_id; ?>"/>
  <input type="hidden" name="method" value="upload"/>
  <input type="hidden" name="required[category_id]" value="Category ID"/>
</form></code>

Et le code JQuery/Ajax suivant :

<code class="javascript">var fd = new FormData();
var file_data = $('input[type="file"]')[0].files; // for multiple files
for (var i = 0; i < file_data.length; i++) {
  fd.append("file_" + i, file_data[i]);
}
var other_data = $('form').serializeArray();
$.each(other_data, function (key, input) {
  fd.append(input.name, input.value);
});
$.ajax({
  url: 'test.php',
  data: fd,
  contentType: false,
  processData: false,
  type: 'POST',
  success: function (data) {
    console.log(data);
  },
});</code>

Ce code obtient d'abord les fichiers de l'entrée et les ajoute à l'objet FormData. . Il obtient ensuite les valeurs des champs de saisie masqués à l'aide de serializeArray() et les ajoute également à l'objet FormData. Enfin, les données sont envoyées au serveur à l'aide d'une requête Ajax.

En suivant ces étapes, vous pouvez envoyer avec succès les données FormData et les données de chaîne via JQuery AJAX, en garantissant que toutes les données nécessaires sont transmises avec la requête.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!