Cos'è un oggetto formData in JavaScript?

Gli oggetti formdata vengono utilizzati per catturare il modulo quando si inviano un modulo recuperandolo con un altro metodo. Per aggiungere campi con metodi, possiamo costruire un modulo HTML Nuovo o più recente o creare un oggetto senza utilizzare alcuna forma. I dati nei campi di testo devono essere forniti quando si fa clic sul pulsante di invio e JavaScript deve identificarli e fornire tali valori variabili.

Questo articolo dimostrerà l'oggetto formData in JavaScript con l'aiuto degli esempi più facili.

Cos'è un oggetto formData in JavaScript?

Un oggetto FormData è un approccio popolare per la costruzione di una raccolta di dati in JavaScript che può essere inviato al server utilizzando "XMLHTTPREQUEST"O recuperato. Esegue le stesse funzioni dell'elemento modulo HTML. Può essere paragonato a un array di array. Un array separato rappresenta ogni elemento che desideriamo trasmettere al server.

Sintassi

Per utilizzare l'oggetto formData in JavaScript, utilizzare la seguente sintassi:

const formData = new FormData ();

Esempio 1: Crea oggetto formData senza forma HTML

Prima di tutto, inizializza una costante con un nome specifico e assegna un valore particolare a quella costante. Qui, il "nuovo formData ()"È utilizzato come valore costante:

Const formData = new FormData ();

Successivamente, aggiungi i dati passando gli argomenti nel "aggiungere()" metodo

Formdata.append ('fname', 'hafsa');
Formdata.append ('lname', 'javed');
Formdata.Append ('Age', 25);

Dopodiché, utilizza il "console.tronco d'albero()" metodo:

console.log ("Informazioni sul modulo");

Usa il "per"Loop per iterare e visualizzare l'output sulla console con l'aiuto di"console.tronco d'albero()" metodo:

per (let obj of formdata)
console.log (obj);

Esempio 2: Crea oggetto formData con un modulo HTML

Per aggiungere il formdata con un modulo HTML, in primo luogo, crea una forma in HTML con l'aiuto di ""Elemento e aggiungi il seguente attributo elencato di seguito:

• Per aggiungere il campo di input nel modulo, usa il “"Elemento.
• All'interno del tag di input, specificare il "tipo"Attributo per definire il tipo di dati dell'elemento. Esistono più valori possibili per questo attributo, incluso "testo","numero","data","parola d'ordine", e molti altri.
• IL "segnaposto"Viene utilizzato per aggiungere il valore da visualizzare sul campo di input e" nome "si riferisce al nome del campo di input.
• "al clic"L'evento viene attivato quando l'utente esegue una funzionalità facendo clic sul mouse:

Quindi, accedi al modulo in CSS e imposta lo spazio attorno al modulo:

.modulo
Margine: 20px;
imbottitura: 30px;

Inoltre, utilizza il tag di script e aggiungi il seguente codice:

functionData ()
var modulo = document.getElementById ("forma");
costformData = newformData (modulo);
console.log ("Dati del modulo");
per (let obj OfformData)
console.log (obj);

Nel frammento di codice sopra:

• Invocare il "getElementById ("forma")"Metodo per accedere al modulo utilizzando l'ID del modulo.
• Ora, memorizza l'elemento accessibile in una nuova costante "Formdata".
• Usa il "per"Loop per iterazione e stampare gli elementi sulla console.

Produzione

Hai imparato a conoscere la creazione dell'oggetto formData in JavaScript.

Conclusione

Un oggetto FormData viene utilizzato per la creazione di una raccolta di dati in JavaScript che può essere inviato al server. Per creare l'oggetto formData in JavaScript, vengono dimostrati due metodi. Il primo sta usando il semplice javascript e il secondo è attraverso la creazione di forma in html e collegandola con javascript. Questo post ha dichiarato sugli oggetti formdata in JavaScript.