JavaScript FormData-gränssnittet tillhandahåller en metod för att skapa ett objekt med nyckel-värdepar. Dessa objekt kan delas över internet med metoden fetch() eller XMLHttpRequest.send(). Den använder HTML-formulärelementets funktionalitet. Den kommer att använda samma format som kommer att användas av en form av kodningstypen som är inställd på 'multipart/form-data'.
Vi kan också skicka det direkt till URLSearchParams-konstruktorn för att få frågeparametrarna precis som i taggbeteendet på GET-begäran.
I allmänhet används den för att skapa en datamängd som skickar den till servern. FormData-objektet är en array av arrayer som innehåller en array för varje element.
Dessa arrayer har följande tre värden:
namn: Den innehåller namnet på fältet.
värde: Den innehåller fältets värde, som kan vara ett String- eller Blob-objekt.
filnamn: Den innehåller filnamnet som är en sträng som innehåller namnet. Namnet kommer att sparas på servern när ett blobobjekt skickas som 2ndparameter.
Varför FormData?
HTML-formulärelementen är utvecklade på ett sätt som automatiskt fångar dess fält och värden. I sådana scenarier hjälper FormData-gränssnittet oss att skicka HTML-formulär med eller utan filer och ytterligare fält.
Det är ett objekt som innehåller formulärdata som matats in av användaren.
Nedan är formulärdatakonstruktorn:
let formData = new FormData([form]);
FormData-objekten kan accepteras som en kropp av nätverksmetoderna såsom hämta. Den är kodad och skickas ut med Content-Type: multipart/form-data som standard.
Servern kommer att betrakta det som vanlig formulärinlämning.
Låt oss förstå ett enkelt exempel på att skicka FormData.
Skickar en Basic FormData
I formuläret nedan skickar vi en enkel FormData till servern.
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); }; I exemplet ovan ställer vi inte upp något backend-API för att skicka data eftersom det ligger utanför omfattningen av denna handledning. Men vi kan kontrollera nyttolasten till nätverksfliken och kan förstå hur FormData-gränssnittet fungerar.
Så om vi tittar på nätverksförfrågan i utvecklarverktyget kommer den att visa nedanstående nyttolast:
I ovanstående nätverksbegäran skickas formulärdata över nätverket med hjälp av FormData-objektet. På andra sätt måste vi ange flera metoder för att hämta data från formuläret.
Med hjälp av FormData-gränssnittet kan vi alltså enkelt skicka formData till servern. Det är bara en enradskod.
FormData Constructor
FormData()-konstruktorn används för att skapa ett nytt FormData-objekt. Den kan användas på följande sätt:
new FormData() new FormData(form) new FormData(form, submitter)
Parametrar:
formulär (valfritt):
Det är ett HTML-element; om det anges kommer FormData-objektet att fyllas i med formulärets aktuella nycklar/värden. Den använder namnattributegenskaperna för varje element för nycklarna och deras inlämnade värde för värdena. Den kodar också filinmatningsinnehåll.
insändare (valfritt):
Avsändarknappen är en del av ett formulär. Om submitter-elementet har en namnattributegenskap kommer dess data att inkluderas i FormData-objektet.
python-utskrift med 2 decimaler
FormData-metoder
FormData tillhandahåller flera metoder som kan vara till hjälp för att komma åt och ändra formulärfältsdata.
I färre fall kan vi behöva ändra formulärdata innan vi skickar dem till servern. Dessa metoder kan vara till hjälp i dessa fall.
Följande är några användbara formData-metoder:
formData.append(namn, värde)
Den tar namnet och värdet av två argument och lägger till ett formulärfältsobjekt med det angivna namnet och värdet.
formData.append(namn, blob, filnamn)
Det tar argumenten namn, blob och filnamn. Den lägger till ett fält för att bilda dataobjekt om HTML-elementet är , sedan ställer det tredje argumentet filnamn in filnamnet enligt filnamnet i användarens filsystem.
formData.delete(name)
Det tar ett namn som ett argument och tar bort det angivna fältet med samma namn.
formData.get(namn)
Det tar också ett namn som ett argument och får det angivna fältets värde med det angivna namnet.
formData.has(namn)
Den tar också namnet som ett argument, kontrollerar fältets existens med det angivna namnet och returnerar sant om det finns; annars falskt.
Ett formulär kan ha flera fält med samma namn, så vi måste ange flera tilläggsmetoder för att lägga till alla dessa fält med samma namn.
Men fälten med samma namn kommer att orsaka fel och skapa komplexitet i att ställa in dem i databasen. Så formData tillhandahåller en annan metod med samma syntax som append, men den tar bort alla fält med det angivna namnet och lägger sedan till ett nytt fält. Således säkerställer det att det kommer att finnas en unik nyckel med ett namn.
vad är linux-filsystemet
formData.set(name, value) formData.set(name, blob, fileName)
I set-metoden fungerar syntax som append-metoden.
Hur itererar man FormData?
FormData tillhandahåller en metod FormData.entries() för att iterera genom alla dess nycklar. Denna metod returnerar en iterator som itererar genom alla nyckel-/värdeposter i FormData. En nyckel är ett strängobjekt, medan värdet kan vara antingen en blob eller en sträng.
Tänk på exemplet nedan:
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]}`); } Resultatet av exemplet ovan kommer att vara:
key1, value1 key2, value2
Skicka ett formulär med en datafil
Filerna kan också skickas med hjälp av FormData. Filerna fungerar på formulärelementet och det skickas som Content-Type: multipart/form-data. Multipart/form-data-kodningen gör det möjligt att skicka filer. Så, som standard, är en del av formulärdata. Vi kan skicka filerna till servern med formulärdatakodningen.
Tänk på exemplet nedan:
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(); }; I exemplet ovan skickas bildobjektet i binärt format med hjälp av FormData. Vi kan titta på det på nätverksfliken i utvecklarverktyget:
Skickar formulärdata som ett Blob-objekt
Att skicka formulärdata som ett blobobjekt är ett enkelt sätt att skicka dynamiskt genererade binära data. Det kan vara vilken bild eller klump som helst; vi kan skicka det direkt till servern genom att skicka det i hämtningskroppen.
Det är bekvämt att skicka bilddata och andra formulärdata som namn, lösenord etc. Servrarna är också mer vänliga att acceptera flerdelat kodade formulär snarare än binär data.
Tänk på exemplet nedan, som skickar bilden tillsammans med andra formulärdata som ett formulär.
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); } I exemplet ovan kan vi se att bildblobben läggs till enligt följande:
formData.append('image', imageBlob, 'image.webp');
Vilket är detsamma som en , och användaren skickade in en fil med namnet 'image.webp' med en del data imageBlob från filsystemet. Servern kommer att läsa det som normala formulärdata.