Vmesnik JavaScript FormData ponuja metodo za ustvarjanje predmeta s pari ključ-vrednost. Te predmete je mogoče deliti prek interneta z metodo fetch() ali XMLHttpRequest.send(). Uporablja funkcionalnost elementa obrazca HTML. Uporabil bo isti format, kot ga bo uporabil obrazec, katerega vrsta kodiranja je nastavljena na 'multipart/form-data'.

Lahko ga posredujemo tudi neposredno konstruktorju URLSearchParams, da dobimo poizvedbene parametre tako kot pri obnašanju oznake pri oddaji zahteve GET.

Na splošno se uporablja za ustvarjanje nabora podatkov, ki ga pošlje strežniku. Objekt FormData je niz nizov, ki vsebuje eno polje za vsak element.

Ti nizi imajo naslednje tri vrednosti:

ime: Vsebuje ime polja.

vrednost: Vsebuje vrednost polja, ki je lahko predmet String ali Blob.

Ime datoteke: Vsebuje ime datoteke, ki je niz, ki vsebuje ime. Ime bo shranjeno na strežniku, ko bo objekt blob posredovan kot 2^ndparameter.

Zakaj FormData?

Elementi obrazca HTML so razviti tako, da samodejno zajame svoja polja in vrednosti. V takšnih scenarijih nam vmesnik FormData pomaga pošiljati obrazce HTML z datotekami in dodatnimi polji ali brez njih.

To je objekt, ki vsebuje podatke obrazca, ki jih vnese uporabnik.

Spodaj je konstruktor podatkov obrazca:

 let formData = new FormData([form]); 

Objekte FormData je mogoče sprejeti kot telo z omrežnimi metodami, kot je pridobivanje. Privzeto je kodiran in poslan s Content-Type: multipart/form-data.

Strežnik bo to obravnaval kot običajno oddajo obrazca.

Razumejmo preprost primer pošiljanja FormData.

Pošiljanje osnovnih podatkov obrazca

V spodnjem obrazcu strežniku pošljemo preprost 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); }; 

V zgornjem primeru ne nastavimo nobenega zalednega API-ja za pošiljanje podatkov, ker to presega obseg te vadnice. Lahko pa preverimo obremenitev zavihka omrežja in razumemo, kako deluje vmesnik FormData.

Torej, če pogledamo omrežno zahtevo v orodju za razvijalce, bo prikazana spodnja obremenitev:

V zgornji omrežni zahtevi se podatki obrazca pošljejo prek omrežja z uporabo objekta FormData. Na druge načine moramo določiti več metod za pridobivanje podatkov iz obrazca.

Tako lahko z vmesnikom FormData preprosto pošljemo formData na strežnik. To je samo enovrstična koda.

Konstruktor FormData

Konstruktor FormData() se uporablja za ustvarjanje novega objekta FormData. Uporablja se lahko na naslednje načine:

 new FormData() new FormData(form) new FormData(form, submitter) 

Parametri:

obrazec (neobvezno):

Je element HTML; če je navedeno, bo predmet FormData napolnjen s trenutnimi ključi/vrednostmi obrazca. Uporablja lastnosti atributa imena vsakega elementa za ključe in njihovo predloženo vrednost za vrednosti. Prav tako kodira vhodno vsebino datoteke.

pošiljatelj (neobvezno):

Gumb za pošiljanje je element obrazca. Če ima element pošiljatelja lastnost atributa imena, bodo njegovi podatki vključeni v objekt FormData.

css poravnava slik

Metode FormData

FormData ponuja več metod, ki so lahko v pomoč pri dostopanju in spreminjanju podatkov polj obrazca.

V manj primerih bomo morda morali spremeniti podatke obrazca, preden jih pošljemo strežniku. Te metode so lahko v teh primerih koristne.

Sledi nekaj uporabnih metod formData:

formData.append(ime, vrednost)

Prevzame ime in vrednost dveh argumentov in doda predmet polja obrazca s podanim imenom in vrednostjo.

formData.append(ime, blob, ime datoteke)

Sprejema argumente ime, blob in ime datoteke. Doda polje za oblikovanje podatkovnih objektov, če je element HTML, potem tretji argument ime datoteke nastavi ime datoteke glede na ime datoteke v uporabnikovem datotečnem sistemu.

formData.delete(ime)

Kot argument vzame ime in odstrani navedeno polje z istim imenom.

formData.get(ime)

Kot argument vzame tudi ime in dobi podano vrednost polja z danim imenom.

formData.has(ime)

Prav tako vzame ime kot argument, preveri obstoj polja z danim imenom in vrne true, če obstaja; sicer lažno.

Obrazec ima lahko več polj z istim imenom, zato moramo podati več metod dodajanja, da dodamo vsa ta istoimenska polja.

Vendar bodo istoimenska polja povzročila napake in zapletla njihovo nastavitev v zbirki podatkov. FormData torej nudi drugo metodo z isto sintakso kot append, vendar odstrani vsa polja z danim imenom in nato doda novo polje. Tako zagotavlja, da bo obstajal edinstven ključ z imenom.

 formData.set(name, value) formData.set(name, blob, fileName) 

V metodi set sintaksa deluje kot metoda dodajanja.

Kako ponoviti FormData?

FormData ponuja metodo FormData.entries() za ponavljanje skozi vse svoje ključe. Ta metoda vrne iterator, ki ponovi vse vnose ključ/vrednost v FormData. Ključ je objekt niza, medtem ko je vrednost lahko blob ali niz.

Razmislite o spodnjem primeru:

 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]}`); } 

Rezultat zgornjega primera bo:

algoritem razvrščanja z združevanjem

 key1, value1 key2, value2 

Pošiljanje obrazca z datoteko podatkov

Datoteke je mogoče poslati tudi z uporabo FormData. Datoteke delujejo na elementu obrazca in se pošljejo kot Content-Type: multipart/form-data. Multipart/form-data kodiranje omogoča pošiljanje datotek. Torej je privzeto del podatkov obrazca. Datoteke lahko pošljemo na strežnik s kodiranjem obrazec-podatki.

Razmislite o spodnjem primeru:

 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(); }; 

V zgornjem primeru je slikovni objekt poslan v binarni obliki z uporabo FormData. Ogledamo si ga lahko v zavihku omrežja v orodju za razvijalce:

Pošiljanje podatkov obrazca kot predmeta Blob

Pošiljanje podatkov obrazca kot objekta blob je preprost način za pošiljanje dinamično ustvarjenih binarnih podatkov. Lahko je katera koli slika ali madež; lahko ga neposredno pošljemo strežniku tako, da ga posredujemo v telesu pridobivanja.

Primerno je pošiljati slikovne podatke in druge podatke obrazcev, kot so ime, geslo itd. Poleg tega so strežniki bolj prijazni za sprejemanje večdelno kodiranih obrazcev namesto binarnih podatkov.

Razmislite o spodnjem primeru, ki pošilja sliko skupaj z drugimi podatki obrazca kot obrazec.

 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); } 

V zgornjem primeru lahko vidimo, da je blob slike dodan na naslednji način:

 formData.append('image', imageBlob, 'image.webp'); 

Kar je enako kot , in uporabnik je predložil datoteko z imenom 'image.webp' z nekaterimi podatki imageBlob iz datotečnega sistema. Strežnik jih bo prebral kot podatke običajnega obrazca.