Sučelje JavaScript FormData pruža metodu za stvaranje objekta koji ima parove ključ-vrijednost. Ovi se objekti mogu dijeliti putem interneta pomoću metode fetch() ili XMLHttpRequest.send(). Koristi funkcionalnost elementa HTML obrasca. Koristit će isti format koji će koristiti obrazac s vrstom kodiranja postavljenom na 'multipart/form-data'.
Možemo ga također proslijediti izravno konstruktoru URLSearchParams da dobijemo parametre upita baš kao u ponašanju oznake na podnošenju zahtjeva GET.
Općenito, koristi se za stvaranje skupa podataka koji se šalje na poslužitelj. FormData objekt je niz nizova koji sadrži jedan niz za svaki element.
Ovi nizovi imaju sljedeće tri vrijednosti:
Ime: Sadrži naziv polja.
vrijednost: Sadrži vrijednost polja, koja može biti String ili Blob objekt.
naziv datoteke: Sadrži naziv datoteke koji je niz koji sadrži naziv. Naziv će biti spremljen na poslužitelju kada se blob objekt proslijedi kao 2ndparametar.
Zašto FormData?
Elementi HTML obrasca razvijeni su na način da automatski hvataju svoja polja i vrijednosti. U takvim scenarijima, sučelje FormData pomaže nam poslati HTML obrasce sa ili bez datoteka i dodatnih polja.
To je objekt koji sadrži podatke obrasca koje je unio korisnik.
Ispod je konstruktor podataka obrasca:
let formData = new FormData([form]);
Objekti FormData mogu se prihvatiti kao tijelo pomoću mrežnih metoda kao što je fetch. Kodira se i šalje s Content-Type: multipart/form-data prema zadanim postavkama.
Poslužitelj će to smatrati redovitim slanjem obrasca.
Razmotrimo jednostavan primjer slanja FormData.
Slanje Basic FormData
U donjem obrascu šaljemo jednostavan FormData na poslužitelj.
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); }; U gornjem primjeru ne postavljamo pozadinski API za slanje podataka jer je to izvan dosega ovog vodiča. No, možemo provjeriti korisni teret na kartici mreže i možemo razumjeti kako radi sučelje FormData.
Dakle, ako pogledamo mrežni zahtjev u alatu za razvojne programere, pokazat će donji korisni sadržaj:
U gornjem mrežnom zahtjevu, podaci obrasca šalju se preko mreže pomoću objekta FormData. Na druge načine, moramo navesti više metoda za dobivanje podataka iz obrasca.
Dakle, korištenjem FormData sučelja, možemo jednostavno poslati formData na poslužitelj. To je samo kod u jednom redu.
FormData konstruktor
FormData() konstruktor se koristi za stvaranje novog FormData objekta. Može se koristiti na sljedeće načine:
new FormData() new FormData(form) new FormData(form, submitter)
Parametri:
obrazac (izborno):
To je HTML element; ako je navedeno, objekt FormData bit će popunjen trenutnim ključevima/vrijednostima obrasca. Koristi svojstva atributa naziva svakog elementa za ključeve i njihovu predanu vrijednost za vrijednosti. Također kodira ulazni sadržaj datoteke.
podnositelj (izborno):
Gumb za slanje je element obrasca. Ako element pošiljatelja ima svojstvo atributa imena, tada će njegovi podaci biti uključeni u objekt FormData.
terminal kali linux
FormData metode
FormData nudi nekoliko metoda koje mogu biti korisne u pristupu i modificiranju podataka polja obrasca.
U manjem broju slučajeva možda ćemo trebati promijeniti podatke obrasca prije slanja na poslužitelj. Ove metode mogu biti od pomoći u ovim slučajevima.
Slijede neke korisne formData metode:
formData.append(ime, vrijednost)
Uzima naziv i vrijednost dvaju argumenata i dodaje objekt polja obrasca s navedenim imenom i vrijednošću.
formData.append(name, blob, fileName)
Uzima argumente name, blob i fileName. Dodaje polje za formiranje podatkovnih objekata ako je HTML element , tada treći argument fileName postavlja naziv datoteke prema nazivu datoteke u korisnikovom datotečnom sustavu.
formData.delete(ime)
Uzima ime kao argument i uklanja navedeno polje istog imena.
formData.get(ime)
Također uzima ime kao argument i dobiva vrijednost navedenog polja s danim imenom.
formData.has(name)
Također uzima ime kao argument, provjerava postojanje polja s danim imenom i vraća true ako postoji; inače lažno.
Obrazac može imati više polja s istim imenom, tako da moramo navesti više metoda dodavanja da bismo dodali sva ta istoimena polja.
No istoimena polja uzrokovat će pogreške i otežati njihovo postavljanje u bazi podataka. Dakle, formData pruža drugu metodu s istom sintaksom kao append, ali uklanja sva polja s danim imenom i zatim dodaje novo polje. Stoga osigurava da će postojati jedinstveni ključ s imenom.
formData.set(name, value) formData.set(name, blob, fileName)
U metodi set sintaksa funkcionira kao metoda dodavanja.
Kako ponoviti FormData?
FormData pruža metodu FormData.entries() za ponavljanje kroz sve svoje ključeve. Ova metoda vraća iterator koji prolazi kroz sve unose ključ/vrijednost u FormData. Ključ je objekt niza, dok vrijednost može biti ili mrlja ili niz.
Razmotrite primjer u nastavku:
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]}`); } Izlaz gornjeg primjera bit će:
key1, value1 key2, value2
Slanje obrasca s datotekom podataka
Datoteke se također mogu slati pomoću FormData. Datoteke rade na elementu obrasca i šalju se kao Content-Type: multipart/form-data. Multipart/form-data kodiranje omogućuje slanje datoteka. Dakle, prema zadanim postavkama, dio je podataka obrasca. Možemo poslati datoteke na poslužitelj s kodiranjem obrazac-podaci.
inorder traversal
Razmotrite primjer u nastavku:
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(); }; U gornjem primjeru, objekt slike šalje se u binarnom formatu pomoću FormData. Možemo ga pogledati u mrežnoj kartici alata za razvojne programere:
Slanje podataka obrasca kao Blob objekta
Slanje podataka obrasca kao blob objekta jednostavan je način za slanje dinamički generiranih binarnih podataka. To može biti bilo koja slika ili mrlja; možemo ga izravno poslati poslužitelju prosljeđivanjem u tijelo dohvaćanja.
Praktično je slati slikovne podatke i druge podatke obrasca kao što su ime, lozinka itd. Također, poslužitelji su prijateljski nastrojeni prema prihvaćanju višedijelno kodiranih obrazaca umjesto binarnih podataka.
Razmotrite primjer u nastavku, koji šalje sliku zajedno s drugim podacima obrasca kao obrazac.
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); } U gornjem primjeru možemo vidjeti da je mrlja slike dodana na sljedeći način:
formData.append('image', imageBlob, 'image.webp');
Što je isto kao , a korisnik je poslao datoteku s nazivom 'image.webp' s nekim podacima imageBlob iz datotečnog sustava. Poslužitelj će ih pročitati kao normalne podatke obrasca.