Questo articolo dimostrerà l'oggetto FormData in JavaScript con l'aiuto degli esempi più semplici.
Che cos'è un oggetto FormData in JavaScript?
Un oggetto FormData è un approccio popolare alla creazione di una raccolta di dati in JavaScript che può essere inviata al server utilizzando ' XMLHttpRequest ” o recuperato. Svolge le stesse funzioni dell'elemento del 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, utilizza la seguente sintassi:
cost formData = nuovo ModuloDati ( ) ;
Esempio 1: creazione di un oggetto FormData senza modulo HTML
Prima di tutto, inizializza una costante con un nome specifico e assegna un valore particolare a quella costante. Ecco, il “ nuovo FormData() ” viene utilizzato come valore costante:
Cost formData = nuovo ModuloDati ( ) ;
Successivamente, aggiungi i dati passando gli argomenti in ' aggiungere() ' metodo
formData. aggiungere ( 'Nome' , 'Ufficiale' ) ;formData. aggiungere ( 'Lnome' , 'Javed' ) ;
formData. aggiungere ( 'età' , 25 ) ;
Successivamente, utilizzare il ' console.log() ' metodo:
consolare. tronco d'albero ( 'Informazioni modulo' ) ;
Usa il ' per ” loop per iterare e visualizzare l'output sulla console con l'aiuto del “ console.log() ' metodo:
per ( let obj di formData ) {consolare. tronco d'albero ( ogg ) ;
}
Esempio 2: creare un oggetto FormData con un modulo HTML
Per aggiungere FormData con un modulo HTML, innanzitutto creare un modulo in HTML con l'aiuto del '
- Per aggiungere il campo di input nel modulo, utilizzare il ' elemento '.
- All'interno del tag di input, specifica il ' tipo ” per definire il tipo di dati dell'elemento. Esistono più valori possibili per questo attributo, tra cui ' testo ”, “ numero ”, “ data ”, “ parola d'ordine ', e molti altri.
- IL ' segnaposto ” viene utilizzato per aggiungere il valore da visualizzare nel campo di input e “name” si riferisce al nome del campo di input.
- “ al clic L'evento viene attivato quando l'utente esegue una funzionalità facendo clic con il mouse:
< tipo di ingresso = 'testo' nome = 'Nome' segnaposto = 'Inserisci il tuo nome di battesimo' >< fratello >< fratello >
< tipo di ingresso = 'testo' nome = 'Lnome' segnaposto = 'Inserire il cognome' >< fratello >< fratello >
< tipo di ingresso = 'data' nome = 'età' segnaposto = 'Inserisci la tua età' >< fratello >< fratello >
< tipo di ingresso = 'pulsante' valore = 'Accedere' al clic = 'dati()' >
modulo >
Successivamente, accedi al modulo in CSS e imposta lo spazio attorno al modulo:
. modulo {margine : 20px ;
imbottitura : 30px ;
}
Inoltre, utilizza il tag script e aggiungi il seguente codice:
functiondata ( ) {era forma = documento. getElementById ( 'modulo' ) ;
constformData = newFormData ( modulo ) ;
consolare. tronco d'albero ( 'Dati modulo' ) ;
per ( let obj offormData ) {
consolare. tronco d'albero ( ogg ) ;
}
}
Nello snippet di codice sopra:
- Invoca il ' getElementById('modulo') ” metodo per accedere al modulo utilizzando l'id del modulo.
- Ora, memorizza l'elemento a cui si accede in una nuova costante ' formData ”.
- Usa il ' per ” loop per l'iterazione e stampa gli elementi sulla console.
Produzione
Hai imparato a conoscere la creazione dell'oggetto FormData in JavaScript.
Conclusione
Un oggetto FormData viene utilizzato per creare una raccolta di dati in JavaScript che possono essere inviati al server. Per creare l'oggetto Formdata in JavaScript, vengono mostrati due metodi. Il primo utilizza JavaScript semplice e il secondo tramite la creazione di moduli in HTML e il collegamento con JavaScript. Questo post ha dichiarato sugli oggetti FormData in JavaScript.