Rozhraní JavaScript FormData poskytuje metodu pro vytvoření objektu s páry klíč–hodnota. Tyto objekty lze sdílet přes internet pomocí metody fetch() nebo XMLHttpRequest.send(). Využívá funkčnost prvku formuláře HTML. Použije stejný formát, jaký bude používat formulář, jehož typ kódování je nastaven na 'multipart/form-data'.
Můžeme jej také předat přímo konstruktoru URLSearchParams, abychom získali parametry dotazu stejně jako v chování značky při odeslání požadavku GET.
Obecně se používá k vytvoření datové sady, která je odesílá na server. Objekt FormData je pole polí, které obsahuje jedno pole pro každý prvek.
Tato pole mají následující tři hodnoty:
název: Obsahuje název pole.
hodnota: Obsahuje hodnotu pole, což může být objekt typu String nebo Blob.
název souboru: Obsahuje název souboru, což je řetězec obsahující název. Název se uloží na server, když je objekt blob předán jako 2ndparametr.
Proč FormData?
Prvky formuláře HTML jsou vyvinuty způsobem, který automaticky zachycuje jeho pole a hodnoty. V takových scénářích nám rozhraní FormData pomáhá odesílat formuláře HTML s nebo bez souborů a dalších polí.
Je to objekt, který obsahuje data formuláře zadaná uživatelem.
Níže je konstruktor dat formuláře:
let formData = new FormData([form]);
Objekty FormData mohou být akceptovány jako tělo síťovými metodami, jako je fetch. Ve výchozím nastavení se kóduje a odesílá s typem obsahu: multipart/form-data.
Server to bude považovat za běžné odeslání formuláře.
Pojďme pochopit jednoduchý příklad odeslání FormData.
Odeslání základních dat formuláře
V níže uvedeném formuláři posíláme na server jednoduchá FormData.
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); }; Ve výše uvedeném příkladu nenastavujeme žádné backendové API pro odesílání dat, protože to je nad rámec tohoto kurzu. Můžeme však zkontrolovat užitečné zatížení na kartě sítě a pochopit, jak funguje rozhraní FormData.
Pokud se tedy podíváme na síťový požadavek ve vývojářském nástroji, zobrazí se níže uvedené užitečné zatížení:
Ve výše uvedeném síťovém požadavku jsou data formuláře odeslána přes síť pomocí objektu FormData. Jinými způsoby musíme zadat více metod, abychom získali data z formuláře.
Pomocí rozhraní FormData tedy můžeme snadno odeslat formData na server. Je to pouze jednořádkový kód.
Konstruktor FormData
Konstruktor FormData() se používá k vytvoření nového objektu FormData. Může být použit následujícími způsoby:
new FormData() new FormData(form) new FormData(form, submitter)
Parametry:
formulář (volitelné):
Je to prvek HTML; pokud je zadán, bude objekt FormData naplněn aktuálními klíči/hodnotami formuláře. Používá vlastnosti atributu name každého prvku pro klíče a jejich odeslanou hodnotu pro hodnoty. Také kóduje vstupní obsah souboru.
zadavatel (volitelné):
Tlačítko odesílatele je součástí formuláře. Pokud má prvek zadavatele vlastnost atribut name, budou jeho data zahrnuta do objektu FormData.
distributivní zákon booleovská algebra
Metody FormData
FormData poskytuje několik metod, které mohou být užitečné při přístupu a úpravě dat polí formuláře.
V méně případech může být nutné změnit data formuláře před odesláním na server. Tyto metody mohou být pro tyto případy užitečné.
Níže jsou uvedeny některé užitečné metody formData:
formData.append(název, hodnota)
Převezme název a hodnotu dvou argumentů a přidá objekt pole formuláře se zadaným názvem a hodnotou.
formData.append(název, blob, název_souboru)
Přebírá argumenty name, blob a fileName. Přidá pole pro vytvoření datových objektů, pokud je element HTML , pak třetí argument fileName nastaví název souboru podle názvu souboru v systému souborů uživatele.
formData.delete(jméno)
průměr vs průměr
Vezme název jako argument a odstraní zadané pole se stejným názvem.
formData.get(jméno)
Vezme také název jako argument a získá hodnotu zadaného pole s daným názvem.
formData.has(name)
Vezme také jméno jako argument, zkontroluje existenci pole s daným jménem a vrátí true, pokud existuje; jinak falešné.
Formulář může mít více polí se stejným názvem, takže pro přidání všech polí se stejným názvem musíme zadat více metod připojení.
Pole se stejným názvem však způsobí chyby a zkomplikují jejich nastavení v databázi. FormData tedy poskytuje jinou metodu se stejnou syntaxí jako append, ale odstraní všechna pole s daným názvem a poté připojí nové pole. Zajistí tedy, že bude existovat jedinečný klíč s názvem.
formData.set(name, value) formData.set(name, blob, fileName)
V metodě set funguje syntaxe jako metoda append.
Jak iterovat FormData?
FormData poskytuje metodu FormData.entries() pro iteraci všech jejích klíčů. Tato metoda vrací iterátor, který prochází všemi položkami klíč/hodnota ve FormData. Klíč je objekt typu řetězec, zatímco hodnotou může být objekt blob nebo řetězec.
Zvažte níže uvedený příklad:
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]}`); } Výstupem výše uvedeného příkladu bude:
key1, value1 key2, value2
Odeslání formuláře se souborem dat
Soubory lze také odeslat pomocí FormData. Soubory fungují na prvku formuláře a ten se odesílá jako Content-Type: multipart/form-data. Kódování multipart/form-data umožňuje odesílání souborů. Ve výchozím nastavení je tedy součástí dat formuláře. Soubory můžeme odeslat na server s kódováním dat formuláře.
Zvažte níže uvedený příklad:
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(); }; Ve výše uvedeném příkladu je objekt obrázku odeslán v binárním formátu pomocí FormData. Můžeme se na to podívat na kartě síť ve vývojářském nástroji:
Odesílání dat formuláře jako objektu Blob
Odeslání dat formuláře jako objektu blob je snadný způsob, jak odeslat dynamicky generovaná binární data. Může to být jakýkoli obrázek nebo blob; můžeme jej přímo odeslat na server předáním v těle načtení.
Je vhodné posílat obrazová data a další data formulářů, jako je jméno, heslo atd. Servery jsou také přátelštější k přijímání vícedílně zakódovaných formulářů spíše než binárních dat.
Zvažte níže uvedený příklad, který odesílá obrázek spolu s dalšími daty formuláře jako formulář.
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); } Ve výše uvedeném příkladu vidíme, že obrázek blob je přidán následovně:
formData.append('image', imageBlob, 'image.webp');
Což je totéž jako , a uživatel odeslal soubor s názvem 'image.webp' s některými daty imageBlob ze systému souborů. Server je přečte jako data normálního formuláře.