L'interfaccia JavaScript FormData fornisce un metodo per creare un oggetto con coppie chiave-valore. Questi oggetti possono essere condivisi su Internet utilizzando il metodo fetch() o XMLHttpRequest.send(). Utilizza la funzionalità dell'elemento del modulo HTML. Utilizzerà lo stesso formato che verrà utilizzato da un modulo il cui tipo di codifica è impostato su 'multipart/form-data'.

Possiamo anche passarlo direttamente al costruttore URLSearchParams per ottenere i parametri della query proprio come nel comportamento del tag nell'invio della richiesta GET.

Generalmente, viene utilizzato per creare un set di dati da inviare al server. L'oggetto FormData è un array di array che contiene un array per ogni elemento.

Questi array hanno i seguenti tre valori:

nome: Contiene il nome del campo.

valore: Contiene il valore del campo, che può essere un oggetto String o BLOB.

nome del file: Contiene il nome del file che è una stringa che contiene il nome. Il nome verrà salvato sul server quando un oggetto BLOB viene passato come 2^ndparametro.

Perché FormData?

Gli elementi del modulo HTML sono sviluppati in modo da catturarne automaticamente i campi e i valori. In tali scenari, l'interfaccia FormData ci aiuta a inviare moduli HTML con o senza file e campi aggiuntivi.

È un oggetto che contiene i dati del modulo immessi dall'utente.

Di seguito è riportato il costruttore dei dati del modulo:

 let formData = new FormData([form]); 

Gli oggetti FormData possono essere accettati come corpo dai metodi di rete come fetch. Viene codificato e inviato con il tipo di contenuto: multipart/form-data per impostazione predefinita.

Il server lo considererà come un normale invio di moduli.

Comprendiamo un semplice esempio di invio del FormData.

Invio di un FormData di base

Nel modulo sottostante, inviamo un semplice FormData al server.

Indice.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); }; 

Nell'esempio precedente, non configuriamo alcuna API backend per l'invio dei dati perché ciò va oltre lo scopo di questo tutorial. Ma possiamo controllare il payload nella scheda di rete e capire come funziona l'interfaccia FormData.

Quindi, se esaminiamo la richiesta di rete nello strumento per sviluppatori, mostrerà il payload seguente:

Nella richiesta di rete precedente, i dati del modulo vengono inviati in rete utilizzando l'oggetto FormData. In altri modi, dobbiamo specificare più metodi per ottenere i dati dal modulo.

Pertanto, utilizzando l'interfaccia FormData, possiamo facilmente inviare formData al server. È solo un codice di una riga.

Costruttore FormData

Il costruttore FormData() viene utilizzato per creare un nuovo oggetto FormData. Può essere utilizzato nei seguenti modi:

 new FormData() new FormData(form) new FormData(form, submitter) 

parametri:

modulo (facoltativo):

È un elemento HTML; se è specificato, l'oggetto FormData verrà popolato con le chiavi/valori correnti del modulo. Utilizza le proprietà dell'attributo name di ciascun elemento per le chiavi e il valore inviato per i valori. Codifica anche il contenuto di input del file.

mittente (facoltativo):

Il pulsante di invio è un elemento di un modulo. Se l'elemento mittente ha una proprietà di attributo name, i suoi dati verranno inclusi nell'oggetto FormData.

chiama una funzione js da html

Metodi FormData

FormData fornisce diversi metodi che possono essere utili per accedere e modificare i dati dei campi del modulo.

In un minor numero di casi, potrebbe essere necessario modificare i dati del modulo prima di inviarlo al server. Questi metodi possono essere utili per questi casi.

Di seguito sono riportati alcuni metodi formData utili:

formData.append(nome, valore)

Prende il nome e il valore di due argomenti e aggiunge un oggetto campo modulo con il nome e il valore forniti.

formData.append(nome, blob, nomefile)

Accetta gli argomenti name, blob e fileName. Aggiunge un campo per formare oggetti dati se l'elemento HTML è , quindi il terzo argomento fileName imposta il nome del file secondo il nome del file nel file system dell'utente.

formData.delete(nome)

Prende un nome come argomento e rimuove il campo specificato con lo stesso nome.

formData.get(nome)

Richiede anche un nome come argomento e ottiene il valore del campo specificato con il nome specificato.

formData.has(nome)

Prende anche il nome come argomento, controlla l'esistenza del campo con il nome specificato e restituisce true se esiste; altrimenti falso.

Un modulo può avere più campi con lo stesso nome, quindi dobbiamo specificare più metodi di aggiunta per aggiungere tutti i campi con lo stesso nome.

Ma i campi con lo stesso nome causeranno errori e creeranno complessità nell'impostarli nel database. Pertanto, formData fornisce un altro metodo con la stessa sintassi di append, ma rimuove tutti i campi con il nome specificato e quindi aggiunge un nuovo campo. Pertanto, garantisce che ci sarà una chiave univoca con un nome.

 formData.set(name, value) formData.set(name, blob, fileName) 

Nel metodo set, la sintassi funziona come il metodo append.

Come iterare FormData?

FormData fornisce un metodo FormData.entries() per scorrere tutte le sue chiavi. Questo metodo restituisce un iteratore che scorre tutte le voci chiave/valore in FormData. Una chiave è un oggetto stringa, mentre il valore può essere un blob o una stringa.

Considera l'esempio seguente:

 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]}`); } 

L'output dell'esempio precedente sarà:

 key1, value1 key2, value2 

Invio di un modulo con un file di dati

I file possono anche essere inviati utilizzando FormData. I file funzionano sull'elemento del modulo e vengono inviati come Content-Type: multipart/form-data. La codifica multipart/form-data consente l'invio di file. Quindi, per impostazione predefinita, fa parte dei dati del modulo. Possiamo inviare i file al server con la codifica form-data.

Considera l'esempio seguente:

 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(); }; 

Nell'esempio precedente, l'oggetto immagine viene inviato in formato binario utilizzando FormData. Possiamo guardarlo nella scheda rete dello strumento per sviluppatori:

Invio dei dati del modulo come oggetto BLOB

L'invio dei dati del modulo come oggetto BLOB è un modo semplice per inviare i dati binari generati dinamicamente. Potrebbe essere qualsiasi immagine o blob; possiamo inviarlo direttamente al server passandolo nel corpo del fetch.

È conveniente inviare dati di immagine e altri dati di moduli come nome, password, ecc. Inoltre, i server sono più facili da accettare moduli con codifica multiparte piuttosto che dati binari.

Considera l'esempio seguente, che invia l'immagine insieme agli altri dati del modulo come modulo.

 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); } 

Nell'esempio sopra, possiamo vedere che il blob dell'immagine viene aggiunto come segue:

 formData.append('image', imageBlob, 'image.webp'); 

Che è uguale a un file e l'utente ha inviato un file con il nome 'image.webp' con alcuni dati imageBlob dal file system. Il server lo leggerà come dati del modulo normale.

sei giunto