JavaScript FormData-grænsefladen giver en metode til at skabe et objekt med nøgleværdi-par. Disse objekter kan deles over internettet ved hjælp af metoden fetch() eller XMLHttpRequest.send(). Det bruger HTML-formularelementets funktionalitet. Det vil bruge det samme format, som vil blive brugt af en form af kodningstypen er sat til 'multipart/form-data'.
Vi kan også sende det direkte til URLSearchParams-konstruktøren for at få forespørgselsparametrene ligesom i tag-adfærden på GET-anmodningsindsendelsen.
Generelt bruges det til at oprette et datasæt, der sender det til serveren. FormData-objektet er et array af arrays, som indeholder et array for hvert element.
Disse arrays har følgende tre værdier:
navn: Den indeholder navnet på feltet.
værdi: Det indeholder feltets værdi, som kan være et String- eller Blob-objekt.
filnavn: Den indeholder filnavnet, som er en streng med navnet. Navnet vil blive gemt på serveren, når et blob-objekt sendes som 2ndparameter.
Hvorfor FormData?
HTML-formularelementerne er udviklet på en måde, der automatisk fanger dets felter og værdier. I sådanne scenarier hjælper FormData-grænsefladen os med at sende HTML-formularer med eller uden filer og yderligere felter.
Det er et objekt, der indeholder formulardataene, der er indtastet af brugeren.
Nedenfor er formulardatakonstruktøren:
let formData = new FormData([form]);
FormData-objekterne kan accepteres som en krop ved hjælp af netværksmetoder som f.eks. hentning. Det er kodet og sendt ud med Content-Type: multipart/form-data som standard.
Serveren vil betragte det som almindelig indsendelse af formularer.
Lad os forstå et simpelt eksempel på at sende FormData.
Afsendelse af en Basic FormData
I nedenstående formular sender vi en simpel FormData til serveren.
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 ovenstående eksempel opsætter vi ikke nogen backend-API til at sende dataene, fordi det er uden for denne tutorials omfang. Men vi kan tjekke nyttelasten til netværksfanen og kan forstå, hvordan FormData-grænsefladen fungerer.
Så hvis vi ser på netværksanmodningen i udviklerværktøjet, vil den vise nedenstående nyttelast:
I ovenstående netværksanmodning sendes formulardataene over netværket ved hjælp af FormData-objektet. På andre måder skal vi specificere flere metoder for at få data fra formularen.
Ved hjælp af FormData-grænsefladen kan vi således nemt sende formData til serveren. Det er kun en one-liner kode.
FormData Constructor
FormData()-konstruktøren bruges til at oprette et nyt FormData-objekt. Det kan bruges på følgende måder:
new FormData() new FormData(form) new FormData(form, submitter)
Parametre:
formular (valgfrit):
Det er et HTML-element; hvis det er angivet, vil FormData-objektet blive udfyldt med formularens aktuelle nøgler/værdier. Den bruger navneattributegenskaberne for hvert element til nøglerne og deres indsendte værdi for værdierne. Det koder også filinputindhold.
afsender (valgfrit):
Afsenderknappen er et element i en formular. Hvis afsenderelementet har en navneegenskab, vil dets data blive inkluderet i FormData-objektet.
mit fulde form
FormData metoder
FormData indeholder flere metoder, som kan være nyttige til at få adgang til og ændre formularfelternes data.
I færre tilfælde skal vi muligvis ændre formulardataene, før de sendes til serveren. Disse metoder kan være nyttige i disse tilfælde.
Følgende er nogle nyttige formData-metoder:
konvertere en dato til en streng
formData.append(navn, værdi)
Det tager navnet og værdien af to argumenter og tilføjer et formularfeltobjekt med det angivne navn og værdi.
formData.append(navn, klat, filnavn)
Det tager navn, klat og filnavn-argumenter. Det tilføjer et felt til at danne dataobjekter, hvis HTML-elementet er , så indstiller det tredje argument filnavn filnavnet i henhold til filnavnet i brugerens filsystem.
formData.delete(navn)
Det tager et navn som et argument og fjerner det angivne felt med samme navn.
formData.get(navn)
Det tager også et navn som et argument og får det angivne felts værdi med det givne navn.
formData.has(navn)
Det tager også navnet som et argument, kontrollerer feltets eksistens med det fornavn, og returnerer sandt, hvis det eksisterer; ellers falsk.
En formular kan have flere felter med samme navn, så vi er nødt til at angive flere tilføjelsesmetoder for at tilføje alle de samme navne felter.
Men de samme navne felter vil forårsage fejl og skabe kompleksitet i at sætte dem i databasen. Så formData giver en anden metode med samme syntaks som append, men den fjerner alle felter med det givne navn og tilføjer derefter et nyt felt. Dermed sikrer det, at der kommer en unik nøgle med et navn.
formData.set(name, value) formData.set(name, blob, fileName)
I set-metoden fungerer syntaks som append-metoden.
Hvordan gentages FormData?
FormData giver en metode FormData.entries() til at iterere gennem alle dens nøgler. Denne metode returnerer en iterator, der itererer gennem alle nøgle-/værdiindtastninger i FormData. En nøgle er et strengobjekt, hvorimod værdien kan være enten en klat eller en streng.
Overvej nedenstående eksempel:
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]}`); } Outputtet fra ovenstående eksempel vil være:
key1, value1 key2, value2
Afsendelse af en formular med en fil med data
Filerne kan også sendes ved hjælp af FormData. Filerne fungerer på formularelementet, og det sendes som Content-Type: multipart/form-data. Multipart/form-data-kodningen tillader afsendelse af filer. Så er som standard en del af formulardataene. Vi kan sende filerne til serveren med form-data-kodning.
Overvej nedenstående eksempel:
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 ovenstående eksempel sendes billedobjektet i det binære format ved hjælp af FormData. Vi kan se det på netværksfanen i udviklerværktøjet:
Sender formulardata som et Blob-objekt
At sende formulardata som et klatobjekt er en nem måde at sende de dynamisk genererede binære data på. Det kunne være et hvilket som helst billede eller klat; vi kan sende det direkte til serveren ved at sende det i henteteksten.
Det er praktisk at sende billeddata og andre formulardata såsom navn, adgangskode osv. Serverne er også mere venlige til at acceptere flerdelte-kodede formularer frem for binære data.
Overvej nedenstående eksempel, som sender billedet sammen med de andre formulardata som en formular.
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 ovenstående eksempel kan vi se billedklatten tilføjes som følger:
formData.append('image', imageBlob, 'image.webp');
Hvilket er det samme som en , og brugeren indsendte en fil med navnet 'image.webp' med nogle data imageBlob fra filsystemet. Serveren vil læse det som normale formdata.