Cet article démontrera l'objet FormData en JavaScript à l'aide des exemples les plus simples.
Qu'est-ce qu'un objet FormData en JavaScript ?
Un objet FormData est une approche populaire pour créer une collection de données en JavaScript qui peut être envoyée au serveur à l'aide de ' XMLHttpRequest ” ou récupéré. Il exécute les mêmes fonctions que l'élément de formulaire HTML. Il peut être comparé à un tableau de tableaux. Un tableau séparé représente chaque élément que nous souhaitons transmettre au serveur.
Syntaxe
Pour utiliser l'objet FormData en JavaScript, utilisez la syntaxe suivante :
constante Données de formulaire = nouveau Données de formulaire ( ) ;
Exemple 1 : Créer un objet FormData sans formulaire HTML
Tout d'abord, initialisez une constante avec un nom spécifique et attribuez une valeur particulière à cette constante. Ici le ' nouveau FormData() ” est utilisé comme valeur constante :
Const. Données de formulaire = nouveau Données de formulaire ( ) ;
Ensuite, ajoutez les données en passant les arguments dans le ' ajouter() ' méthode
Données de formulaire. ajouter ( 'Fnom' , 'Officier' ) ;Données de formulaire. ajouter ( 'Lname' , 'Javed' ) ;
Données de formulaire. ajouter ( 'âge' , 25 ) ;
Après cela, utilisez le ' console.log() ' méthode:
console. enregistrer ( 'Informations sur le formulaire' ) ;
Utilisez le ' pour ' boucle pour itérer et afficher la sortie sur la console à l'aide de la ' console.log() ' méthode:
pour ( laisser obj de formData ) {console. enregistrer ( obj ) ;
}
Exemple 2 : Créer un objet FormData avec un formulaire HTML
Pour ajouter le FormData avec un formulaire HTML, créez d'abord un formulaire en HTML à l'aide du '
- Pour ajouter le champ de saisie dans le formulaire, utilisez le '
' élément. - À l'intérieur de la balise d'entrée, spécifiez le ' taper ” pour définir le type de données de l'élément. Il existe plusieurs valeurs possibles pour cet attribut, y compris ' texte ”, “ nombre ”, “ date ”, “ mot de passe ', et beaucoup plus.
- Le ' espace réservé ' est utilisé pour ajouter la valeur à afficher sur le champ de saisie, et 'nom' fait référence au nom du champ de saisie.
- ' sur clic ” est déclenché lorsque l'utilisateur exécute une fonctionnalité en cliquant sur la souris :
< type d'entrée = 'texte' nom = 'Fname' espace réservé = 'Entrez votre prénom' >< Br >< Br >
< type d'entrée = 'texte' nom = 'Lname' espace réservé = 'Entrez votre nom de famille' >< Br >< Br >
< type d'entrée = 'date' nom = 'âge' espace réservé = 'Entrez votre âge' >< Br >< Br >
< type d'entrée = 'bouton' valeur = 'Entrer' sur clic = 'données()' >
former >
Ensuite, accédez au formulaire en CSS et définissez l'espace autour du formulaire :
. former {marge : 20px ;
rembourrage : 30px ;
}
De plus, utilisez la balise script et ajoutez le code suivant :
données de fonction ( ) {était la forme = document. getElementById ( 'former' ) ;
constformData = newFormData ( former ) ;
console. enregistrer ( 'Données de formulaire' ) ;
pour ( laisser obj offormData ) {
console. enregistrer ( obj ) ;
}
}
Dans l'extrait de code ci-dessus :
- Invoquez le ' getElementById('formulaire') ” méthode pour accéder au formulaire en utilisant l'identifiant du formulaire.
- Maintenant, stockez l'élément accédé dans une nouvelle constante ' Données de formulaire ”.
- Utilisez le ' pour ” boucle pour l'itération et imprime les éléments sur la console.
Sortir
Vous avez appris la création de l'objet FormData en JavaScript.
Conclusion
Un objet FormData est utilisé pour construire une collection de données en JavaScript qui peut être envoyée au serveur. Pour créer l'objet Formdata en JavaScript, deux méthodes sont présentées. Le premier utilise JavaScript simple et le second consiste à créer un formulaire en HTML et à le lier avec JavaScript. Cet article parlait des objets FormData en JavaScript.