„JavaScript FormData“ sąsaja suteikia metodą, kaip sukurti objektą, turintį raktų ir reikšmių poras. Šie objektai gali būti bendrinami internetu naudojant fetch() arba XMLHttpRequest.send() metodą. Jame naudojamos HTML formos elemento funkcijos. Jis naudos tą patį formatą, kurį naudos forma, kurios kodavimo tipas nustatytas į „multipart/form-data“.
Taip pat galime perduoti jį tiesiogiai URLSearchParams konstruktoriui, kad gautume užklausos parametrus, kaip ir žymos elgesyje pateikiant GET užklausą.
Paprastai jis naudojamas duomenų rinkiniui sukurti, kuris siunčiamas į serverį. FormData objektas yra masyvų masyvas, kuriame yra vienas masyvas kiekvienam elementui.
Šie masyvai turi šias tris reikšmes:
vardas: Jame yra lauko pavadinimas.
vertė: Jame yra lauko reikšmė, kuri gali būti eilutės arba dėmės objektas.
failo pavadinimas: Jame yra failo pavadinimas, kuris yra eilutė, turinti pavadinimą. Pavadinimas bus išsaugotas serveryje, kai blob objektas bus perduodamas kaip 2ndparametras.
Kodėl „FormData“?
HTML formos elementai sukurti taip, kad automatiškai fiksuotų jo laukus ir reikšmes. Tokiais atvejais FormData sąsaja padeda mums siųsti HTML formas su failais ir papildomais laukais arba be jų.
Tai objektas, kuriame yra vartotojo įvesti formos duomenys.
Žemiau yra formos duomenų konstruktorius:
let formData = new FormData([form]);
FormData objektai gali būti priimti kaip korpusas naudojant tinklo metodus, pvz., „Ftch“. Pagal numatytuosius nustatymus jis yra užkoduotas ir išsiunčiamas su turinio tipu: kelių dalių / formos duomenys.
Serveris tai laikys įprastu formos pateikimu.
Supraskime paprastą FormData siuntimo pavyzdį.
Pagrindinės formos duomenų siuntimas
Žemiau esančioje formoje į serverį siunčiame paprastą 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); }; Aukščiau pateiktame pavyzdyje nenustatome jokios užpakalinės programos API duomenims siųsti, nes tai nepatenka į šios mokymo programos taikymo sritį. Tačiau galime patikrinti tinklo skirtuko naudingąją apkrovą ir suprasti, kaip veikia FormData sąsaja.
Taigi, jei pažvelgsime į tinklo užklausą kūrėjo įrankyje, ji parodys toliau pateiktą naudingą apkrovą:
Aukščiau pateiktoje tinklo užklausoje formos duomenys siunčiami tinklu naudojant FormData objektą. Kitais būdais turime nurodyti kelis metodus, kad gautume duomenis iš formos.
Taigi, naudodamiesi FormData sąsaja, galime lengvai siųsti formData į serverį. Tai tik vienos eilutės kodas.
FormData konstruktorius
FormData() konstruktorius naudojamas naujam FormData objektui sukurti. Jis gali būti naudojamas šiais būdais:
new FormData() new FormData(form) new FormData(form, submitter)
Parametrai:
forma (neprivaloma):
Tai HTML elementas; jei jis nurodytas, FormData objektas bus užpildytas esamais formos raktais / reikšmėmis. Jis naudoja kiekvieno elemento pavadinimo atributo ypatybes raktams ir jų pateiktą reikšmę reikšmėms. Jis taip pat koduoja failo įvesties turinį.
pateikėjas (nebūtina):
Pateikėjo mygtukas yra formos elementas. Jei pateikėjo elementas turi pavadinimo atributo ypatybę, tada jo duomenys bus įtraukti į FormData objektą.
Instagram privalumai asmeniniam naudojimui
FormData metodai
„FormData“ pateikia kelis metodus, kurie gali būti naudingi norint pasiekti ir modifikuoti formos laukų duomenis.
Retesniais atvejais mums gali tekti pakeisti formos duomenis prieš siunčiant juos į serverį. Šie metodai gali būti naudingi tokiais atvejais.
Toliau pateikiami keli naudingi formData metodai:
formData.append(vardas, reikšmė)
Jis paima dviejų argumentų pavadinimą ir reikšmę ir prideda formos lauko objektą su pateiktu pavadinimu ir reikšme.
formData.append(vardas, dėmė, failo pavadinimas)
Tam reikia pavadinimo, blob ir failo pavadinimo argumentų. Jis prideda lauką duomenų objektams formuoti, jei HTML elementas yra , tada trečiasis argumentas fileName nustato failo pavadinimą pagal failo pavadinimą vartotojo failų sistemoje.
formData.delete(vardas)
Jis naudoja pavadinimą kaip argumentą ir pašalina nurodytą lauką tuo pačiu pavadinimu.
formData.get(vardas)
Jis taip pat naudoja pavadinimą kaip argumentą ir gauna nurodyto lauko reikšmę su nurodytu pavadinimu.
formData.has(vardas)
Jis taip pat naudoja pavadinimą kaip argumentą, patikrina lauko egzistavimą su nurodytu pavadinimu ir grąžina teisingą, jei jis egzistuoja; kitaip klaidinga.
Formoje gali būti keli laukai tuo pačiu pavadinimu, todėl turime nurodyti kelis pridėjimo metodus, kad pridėtume visus tuos pačius pavadinimus.
Tačiau to paties pavadinimo laukai sukels klaidų ir sudarys sudėtingumą nustatant juos duomenų bazėje. Taigi, formData pateikia kitą metodą, kurio sintaksė tokia pati kaip pridėti, tačiau pašalina visus laukus su nurodytu pavadinimu ir prideda naują lauką. Taigi tai užtikrina, kad bus unikalus raktas su pavadinimu.
formData.set(name, value) formData.set(name, blob, fileName)
Taikant nustatytą metodą, sintaksė veikia kaip pridėjimo metodas.
Kaip kartoti „FormData“?
FormData suteikia metodą FormData.entries(), kad būtų galima kartoti visus raktus. Šis metodas grąžina iteratorių, kuris kartoja visus rakto / vertės įrašus FormData. Raktas yra eilutės objektas, o reikšmė gali būti blob arba eilutė.
Apsvarstykite toliau pateiktą pavyzdį:
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]}`); } Aukščiau pateikto pavyzdžio išvestis bus tokia:
key1, value1 key2, value2
Formos siuntimas su duomenų byla
Failus taip pat galima siųsti naudojant FormData. Failai veikia formos elemente ir siunčiami kaip turinio tipas: kelių dalių / formos duomenys. Kelių dalių / formos duomenų kodavimas leidžia siųsti failus. Taigi pagal numatytuosius nustatymus yra formos duomenų dalis. Failus galime siųsti į serverį su form-data kodavimu.
Apsvarstykite toliau pateiktą pavyzdį:
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(); }; Aukščiau pateiktame pavyzdyje vaizdo objektas siunčiamas dvejetainiu formatu naudojant FormData. Tai galime pamatyti kūrėjo įrankio tinklo skirtuke:
Formos duomenų siuntimas kaip blob objektas
Formos duomenų siuntimas kaip blob objektas yra paprastas būdas siųsti dinamiškai sugeneruotus dvejetainius duomenis. Tai gali būti bet koks vaizdas arba dėmė; galime tiesiogiai nusiųsti jį į serverį, perduodami jį gavimo tekste.
Patogu siųsti vaizdo duomenis ir kitus formų duomenis, tokius kaip vardas, slaptažodis ir kt. Be to, serveriai yra draugiškesni priimti kelių dalių koduotas formas, o ne dvejetainius duomenis.
Apsvarstykite toliau pateiktą pavyzdį, kuriame vaizdas siunčiamas kartu su kitais formos duomenimis kaip forma.
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); } Aukščiau pateiktame pavyzdyje matome, kad vaizdo blobas pridedamas taip:
formData.append('image', imageBlob, 'image.webp');
Tai yra tas pats, kas , ir vartotojas pateikė failą pavadinimu „image.webp“ su tam tikrais „imageBlob“ duomenimis iš failų sistemos. Serveris nuskaitys juos kaip įprastos formos duomenis.
turi kitą java