L'interface JavaScript FormData fournit une méthode pour créer un objet ayant des paires clé-valeur. Ces objets peuvent être partagés sur Internet à l'aide de la méthode fetch() ou XMLHttpRequest.send(). Il utilise la fonctionnalité de l'élément de formulaire HTML. Il utilisera le même format qui sera utilisé par un formulaire dont le type d'encodage est défini sur 'multipart/form-data'.
Nous pouvons également le transmettre directement au constructeur URLSearchParams pour obtenir les paramètres de requête, tout comme dans le comportement de la balise lors de la soumission de la requête GET.
Généralement, il est utilisé pour créer un ensemble de données afin de l'envoyer au serveur. L'objet FormData est un tableau de tableaux qui contient un tableau pour chaque élément.
Ces tableaux ont les trois valeurs suivantes :
nom: Il contient le nom du champ.
valeur: Il contient la valeur du champ, qui peut être un objet String ou Blob.
nom de fichier: Il contient le nom du fichier qui est une chaîne contenant le nom. Le nom sera enregistré sur le serveur lorsqu'un objet blob sera passé en tant que 2sdparamètre.
Pourquoi FormData ?
Les éléments du formulaire HTML sont développés de manière à capturer automatiquement ses champs et ses valeurs. Dans de tels scénarios, l'interface FormData nous aide à envoyer des formulaires HTML avec ou sans fichiers et champs supplémentaires.
C'est un objet qui contient les données du formulaire saisies par l'utilisateur.
Vous trouverez ci-dessous le constructeur de données du formulaire :
let formData = new FormData([form]);
Les objets FormData peuvent être acceptés comme corps par les méthodes réseau telles que fetch. Il est codé et envoyé avec le Content-Type : multipart/form-data par défaut.
Le serveur le considérera comme une soumission de formulaire régulière.
Comprenons un exemple simple d'envoi du FormData.
Envoi d'un FormData de base
Dans le formulaire ci-dessous, nous envoyons un simple FormData au serveur.
Index.html :
formElem.onsubmit = async (e) => { e.preventDefault(); const data=new FormData(myform) let response = await fetch('url', { method: 'POST', body: data }); let result = await response.json(); Console.log(result); }; Dans l'exemple ci-dessus, nous ne configurons aucune API backend pour envoyer les données car cela dépasse le cadre de ce didacticiel. Mais nous pouvons vérifier la charge utile dans l’onglet réseau et comprendre comment fonctionne l’interface FormData.
Ainsi, si nous examinons la requête réseau dans l'outil de développement, elle affichera la charge utile ci-dessous :
Dans la requête réseau ci-dessus, les données du formulaire sont envoyées sur le réseau à l'aide de l'objet FormData. D'une autre manière, nous devons spécifier plusieurs méthodes pour obtenir les données du formulaire.
Ainsi, grâce à l'interface FormData, nous pouvons facilement envoyer le formData au serveur. C'est juste un code à une seule ligne.
Constructeur FormData
Le constructeur FormData() est utilisé pour créer un nouvel objet FormData. Il peut être utilisé des manières suivantes :
new FormData() new FormData(form) new FormData(form, submitter)
Paramètres:
formulaire (facultatif) :
C'est un élément HTML ; s'il est spécifié, l'objet FormData sera renseigné avec les clés/valeurs actuelles du formulaire. Il utilise les propriétés d'attribut de nom de chaque élément pour les clés et leur valeur soumise pour les valeurs. Il code également le contenu d’entrée du fichier.
demandeur (facultatif) :
Le bouton de soumission est un élément d'un formulaire. Si l'élément soumettant a une propriété d'attribut name, ses données seront incluses dans l'objet FormData.
différence entre programme et script
Méthodes FormData
FormData fournit plusieurs méthodes qui peuvent être utiles pour accéder et modifier les données des champs du formulaire.
Dans de rares cas, nous devrons peut-être modifier les données du formulaire avant de l'envoyer au serveur. Ces méthodes peuvent être utiles dans ces cas.
Voici quelques méthodes formData utiles :
sous-chaîne chaîne java
formData.append (nom, valeur)
Il prend le nom et la valeur de deux arguments et ajoute un objet champ de formulaire avec le nom et la valeur fournis.
formData.append (nom, blob, nom de fichier)
Il prend les arguments name, blob et fileName. Il ajoute un champ pour former des objets de données si l'élément HTML est , puis le troisième argument fileName définit le nom du fichier selon le nom de fichier dans le système de fichiers de l'utilisateur.
formData.delete(nom)
Il prend un nom comme argument et supprime le champ spécifié portant le même nom.
formData.get(nom)
Il prend également un nom comme argument et obtient la valeur du champ spécifié avec le nom donné.
formData.has(nom)
Il prend également le nom comme argument, vérifie l'existence du champ avec le nom donné et renvoie true s'il existe ; sinon faux.
Un formulaire peut avoir plusieurs champs portant le même nom, nous devons donc spécifier plusieurs méthodes d'ajout pour ajouter tous ces champs du même nom.
Mais les champs du même nom provoqueront des erreurs et compliqueront leur définition dans la base de données. Ainsi, formData fournit une autre méthode avec la même syntaxe que append, mais elle supprime tous les champs portant le nom donné, puis ajoute un nouveau champ. Ainsi, il garantit qu’il y aura une clé unique avec un nom.
formData.set(name, value) formData.set(name, blob, fileName)
Dans la méthode set, la syntaxe fonctionne comme la méthode append.
Comment itérer FormData ?
FormData fournit une méthode FormData.entries() pour parcourir toutes ses clés. Cette méthode renvoie un itérateur qui parcourt toutes les entrées clé/valeur du FormData. Une clé est un objet chaîne, alors que la valeur peut être soit un blob, soit une chaîne.
Considérez l'exemple ci-dessous :
formData.append('key1', 'value1'); formData.append('key2', 'value2'); // Display the key/value pairs for (const pair of formData.entries()) { console.log(`${pair[0]}, ${pair[1]}`); } Le résultat de l'exemple ci-dessus sera :
key1, value1 key2, value2
Envoi d'un formulaire avec un fichier de données
Les fichiers peuvent également être envoyés à l'aide du FormData. Les fichiers fonctionnent sur l'élément de formulaire et il est envoyé en tant que Content-Type : multipart/form-data. L'encodage multipart/form-data permet l'envoi de fichiers. Ainsi, par défaut, fait partie des données du formulaire. Nous pouvons envoyer les fichiers au serveur avec l'encodage des données du formulaire.
Considérez l'exemple ci-dessous :
File: myform.onsubmit = async (e) => { e.preventDefault(); const data=new FormData(myform) console.log(data) let response = await fetch('url', { method: 'POST', body: data }); let result = await response.json(); }; Dans l'exemple ci-dessus, l'objet image est envoyé au format binaire à l'aide de FormData. On peut le regarder dans l'onglet réseau de l'outil de développement :
Envoi de données de formulaire en tant qu'objet Blob
L'envoi de données de formulaire en tant qu'objet blob est un moyen simple d'envoyer les données binaires générées dynamiquement. Il peut s'agir de n'importe quelle image ou goutte ; nous pouvons l'envoyer directement au serveur en le passant dans le corps de récupération.
Il est pratique d'envoyer des données d'image et d'autres données de formulaire telles que le nom, le mot de passe, etc. De plus, les serveurs sont plus conviviaux pour accepter des formulaires codés en plusieurs parties plutôt que des données binaires.
Considérez l'exemple ci-dessous, qui envoie l'image avec les autres données du formulaire sous forme de formulaire.
mycanvas.onmousemove = function(e) { let ctx = mycanvas.getContext('2d'); ctx.lineTo(e.clientX, e.clientY); ctx.stroke(); }; async function submit() { let imageBlob = await new Promise(resolve => mycanvas.toBlob(resolve, 'image/png')); let formData = new FormData(); formData.append('firstName', 'Alex'); formData.append('image', imageBlob, 'image.webp'); let response = await fetch('url', { method: 'POST', body: formData }); let result = await response.json(); alert(result.message); } Dans l'exemple ci-dessus, nous pouvons voir que l'image blob est ajoutée comme suit :
formData.append('image', imageBlob, 'image.webp');
Ce qui équivaut à un fichier , et l'utilisateur a soumis un fichier portant le nom « image.webp » avec des données imageBlob du système de fichiers. Le serveur le lira comme des données de formulaire normales.