JavaScript FormData-grensesnittet gir en metode for å lage et objekt som har nøkkelverdi-par. Disse objektene kan deles over internett ved å bruke metoden fetch() eller XMLHttpRequest.send(). Den bruker funksjonaliteten til HTML-skjemaelementet. Den vil bruke det samme formatet som vil bli brukt av en form av kodingstypen er satt til 'flerpart/form-data'.
Vi kan også sende det direkte til URLSearchParams-konstruktøren for å få spørringsparameterne akkurat som i tag-atferden på GET-forespørselen.
Vanligvis brukes det til å lage et datasett som sender det til serveren. FormData-objektet er en matrise med matriser som inneholder én matrise for hvert element.
Disse matrisene har følgende tre verdier:
Navn: Den inneholder navnet på feltet.
verdi: Den inneholder feltets verdi, som kan være et String- eller Blob-objekt.
filnavn: Den inneholder filnavnet som er en streng som inneholder navnet. Navnet vil bli lagret på serveren når et blob-objekt sendes som 2ndparameter.
Hvorfor FormData?
HTML-skjemaelementene er utviklet på en måte som automatisk fanger opp feltene og verdiene. I slike scenarier hjelper FormData-grensesnittet oss med å sende HTML-skjemaer med eller uten filer og tilleggsfelt.
Det er et objekt som inneholder skjemadataene som er lagt inn av brukeren.
Nedenfor er skjemadatakonstruktøren:
let formData = new FormData([form]);
FormData-objektene kan aksepteres som en kropp av nettverksmetodene som f.eks. henting. Den er kodet og sendt ut med Content-Type: multipart/form-data som standard.
Serveren vil vurdere det som vanlig skjemainnsending.
La oss forstå et enkelt eksempel på sending av FormData.
Sende en grunnleggende skjemadata
I skjemaet nedenfor sender vi en enkel 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 eksemplet ovenfor setter vi ikke opp noen backend-API for å sende dataene fordi det er utenfor omfanget av denne opplæringen. Men vi kan sjekke nyttelasten til nettverksfanen og kan forstå hvordan FormData-grensesnittet fungerer.
Så hvis vi ser på nettverksforespørselen i utviklerverktøyet, vil den vise nyttelasten nedenfor:
I nettverksforespørselen ovenfor sendes skjemadataene over nettverket ved hjelp av FormData-objektet. På andre måter må vi spesifisere flere metoder for å hente dataene fra skjemaet.
Ved å bruke FormData-grensesnittet kan vi dermed enkelt sende formData til serveren. Det er bare en enlinjekode.
FormData Constructor
FormData()-konstruktøren brukes til å lage et nytt FormData-objekt. Den kan brukes på følgende måter:
new FormData() new FormData(form) new FormData(form, submitter)
Parametere:
skjema (valgfritt):
Det er et HTML-element; hvis det er spesifisert, vil FormData-objektet fylles ut med skjemaets gjeldende nøkler/verdier. Den bruker navnattributt-egenskapene til hvert element for nøklene og deres innsendte verdi for verdiene. Den koder også inndata for filer.
innsender (valgfritt):
Innsenderknappen er et element i et skjema. Hvis senderelementet har en navnattributt-egenskap, vil dataene inkluderes i FormData-objektet.
ulemper for internett
FormData-metoder
FormData tilbyr flere metoder som kan være nyttige for å få tilgang til og endre skjemafeltdataene.
I færre tilfeller kan det hende vi må endre skjemadataene før de sendes til serveren. Disse metodene kan være nyttige i disse tilfellene.
Følgende er noen nyttige formData-metoder:
java streng til heltall konvertering
formData.append(navn, verdi)
Den tar navnet og verdien til to argumenter og legger til et skjemafeltobjekt med det angitte navnet og verdien.
formData.append(navn, blob, filnavn)
Det tar navn, blob og filnavn-argumenter. Den legger til et felt for å danne dataobjekter hvis HTML-elementet er , så angir det tredje argumentet filnavn filnavnet i henhold til filnavnet i brukerens filsystem.
formData.delete(navn)
Den tar et navn som et argument og fjerner det angitte feltet med samme navn.
formData.get(navn)
Den tar også et navn som argument og får det angitte feltets verdi med det gitte navnet.
formData.has(navn)
Den tar også navnet som et argument, sjekker feltets eksistens med det gitte navnet, og returnerer sant hvis det eksisterer; ellers falsk.
Et skjema kan ha flere felt med samme navn, så vi må spesifisere flere tilleggsmetoder for å legge til alle de samme navngitte feltene.
Men de samme navngitte feltene vil forårsake feil og skape kompleksitet i å sette dem i databasen. Så formData gir en annen metode med samme syntaks som append, men den fjerner alle felt med det gitte navnet og legger deretter til et nytt felt. Dermed sikrer det at det blir en unik nøkkel med navn.
formData.set(name, value) formData.set(name, blob, fileName)
I settmetoden fungerer syntaks som append-metoden.
Hvordan iterere FormData?
FormData gir en metode FormData.entries() for å iterere gjennom alle nøklene. Denne metoden returnerer en iterator som itererer gjennom alle nøkkel-/verdioppføringer i FormData. En nøkkel er et strengobjekt, mens verdien kan være enten en blob eller en streng.
Tenk på eksemplet nedenfor:
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]}`); } Utdataene fra eksemplet ovenfor vil være:
key1, value1 key2, value2
Sende et skjema med en fil med data
Filene kan også sendes ved hjelp av FormData. Filene fungerer på skjemaelementet og det sendes som Content-Type: multipart/form-data. Multipart/form-data-kodingen gjør det mulig å sende filer. Så, som standard, er en del av skjemadataene. Vi kan sende filene til serveren med skjemadatakodingen.
Tenk på eksemplet nedenfor:
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 eksemplet ovenfor sendes bildeobjektet i binært format ved hjelp av FormData. Vi kan se det i nettverksfanen til utviklerverktøyet:
Sender skjemadata som et Blob-objekt
Å sende skjemadata som et blob-objekt er en enkel måte å sende de dynamisk genererte binære dataene på. Det kan være et hvilket som helst bilde eller blob; vi kan sende den direkte til serveren ved å sende den i henteteksten.
Det er praktisk å sende bildedata og andre skjemadata som navn, passord osv. Serverne er også mer vennlige til å akseptere flerdelte kodede skjemaer i stedet for binære data.
Tenk på eksemplet nedenfor, som sender bildet sammen med de andre skjemadataene som et skjema.
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 eksemplet ovenfor kan vi se at bildeblokken er lagt til som følger:
formData.append('image', imageBlob, 'image.webp');
Som er det samme som en , og brukeren sendte inn en fil med navnet 'image.webp' med noen data imageBlob fra filsystemet. Serveren vil lese det som vanlige skjemadata.