JavaScript FormData -käyttöliittymä tarjoaa menetelmän luoda objekti, jossa on avain-arvo-pareja. Nämä objektit voidaan jakaa Internetin kautta fetch()- tai XMLHttpRequest.send()-menetelmällä. Se käyttää HTML-lomakeelementin toimintoja. Se käyttää samaa muotoa, jota käytetään muodossa, jonka koodaustyyppi on 'multipart/form-data'.
Voimme myös välittää sen suoraan URLSearchParams-konstruktorille saadaksemme kyselyparametrit aivan kuten tunnisteen käyttäytymisessä GET-pyynnön lähetyksessä.
Yleensä sitä käytetään luomaan tietojoukko, joka lähettää sen palvelimelle. FormData-objekti on taulukoiden joukko, joka sisältää yhden taulukon jokaista elementtiä kohti.
Näillä taulukoilla on seuraavat kolme arvoa:
nimi: Se sisältää kentän nimen.
arvo: Se sisältää kentän arvon, joka voi olla merkkijono- tai blob-objekti.
Tiedoston nimi: Se sisältää tiedostonimen, joka on merkkijono, joka sisältää nimen. Nimi tallennetaan palvelimelle, kun blob-objekti välitetään muodossa 2ndparametri.
Miksi FormData?
HTML-lomakeelementit on kehitetty siten, että sen kentät ja arvot tallennetaan automaattisesti. Tällaisissa tilanteissa FormData-käyttöliittymä auttaa meitä lähettämään HTML-lomakkeita tiedostojen ja lisäkenttien kanssa tai ilman.
Se on objekti, joka sisältää käyttäjän syöttämät lomaketiedot.
Alla on lomaketietojen rakentaja:
let formData = new FormData([form]);
FormData-objektit voidaan hyväksyä rungoksi verkkomenetelmillä, kuten hae. Se on koodattu ja lähetetään oletusarvoisesti sisältötyyppi: moniosainen/lomakedata.
Palvelin pitää sitä tavallisena lomakkeen lähetyksenä.
Ymmärretään yksinkertainen esimerkki FormDatan lähettämisestä.
Peruslomaketietojen lähettäminen
Alla olevassa lomakkeessa lähetämme palvelimelle yksinkertaisen FormDatan.
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); }; Yllä olevassa esimerkissä emme määritä taustasovellusliittymää tietojen lähettämiseen, koska se ei kuulu tämän opetusohjelman piiriin. Mutta voimme tarkistaa verkkovälilehden hyötykuorman ja ymmärtää kuinka FormData-liitäntä toimii.
Joten jos tarkastelemme verkkopyyntöä kehittäjätyökalussa, se näyttää alla olevan hyötykuorman:
Yllä olevassa verkkopyynnössä lomaketiedot lähetetään verkon yli käyttämällä FormData-objektia. Muilla tavoilla meidän on määritettävä useita tapoja saada tiedot lomakkeesta.
Näin ollen FormData-rajapinnan avulla voimme helposti lähettää formDatan palvelimelle. Se on vain yksilinjainen koodi.
FormData Constructor
FormData()-konstruktoria käytetään uuden FormData-objektin luomiseen. Sitä voidaan käyttää seuraavilla tavoilla:
new FormData() new FormData(form) new FormData(form, submitter)
Parametrit:
lomake (valinnainen):
Se on HTML-elementti; jos se on määritetty, FormData-objekti täytetään lomakkeen nykyisillä avaimilla/arvoilla. Se käyttää kunkin elementin nimi-attribuutin ominaisuuksia avaimille ja niiden lähetettyä arvoa arvoille. Se myös koodaa tiedoston syötetyn sisällön.
lähettäjä (valinnainen):
Lähettäjäpainike on lomakkeen osa. Jos lähettäjäelementillä on name-attribuuttiominaisuus, sen tiedot sisällytetään FormData-objektiin.
java päivämäärä ajan tasalla
FormData-menetelmät
FormData tarjoaa useita menetelmiä, joista voi olla apua lomakekenttien tietojen käyttämisessä ja muokkaamisessa.
Harvemmissa tapauksissa saatamme joutua muuttamaan lomaketietoja ennen niiden lähettämistä palvelimelle. Nämä menetelmät voivat olla hyödyllisiä näissä tapauksissa.
Seuraavassa on joitain hyödyllisiä formData-menetelmiä:
formData.append(nimi, arvo)
Se ottaa kahden argumentin nimen ja arvon ja lisää lomakekenttäobjektin annetulla nimellä ja arvolla.
formData.append(nimi, blob, tiedostonnimi)
Se ottaa nimi-, blob- ja fileName-argumentit. Se lisää kentän tietoobjektien muodostamiseksi, jos HTML-elementti on , sitten kolmas argumentti fileName asettaa tiedostonimen käyttäjän tiedostojärjestelmän tiedostonimen mukaan.
formData.delete(nimi)
Se ottaa nimen argumenttina ja poistaa määritetyn samannimisen kentän.
formData.get(nimi)
Se ottaa myös nimen argumenttina ja saa määritetyn kentän arvon annetulla nimellä.
formData.has(nimi)
Se ottaa myös nimen argumenttina, tarkistaa kentän olemassaolon annetulla nimellä ja palauttaa tosi, jos se on olemassa; muuten vääriä.
Lomakkeessa voi olla useita kenttiä samalla nimellä, joten meidän on määritettävä useita liittämistapoja lisätäksemme kaikki samannimiset kentät.
Mutta samannimiset kentät aiheuttavat virheitä ja vaikeuttavat niiden määrittämistä tietokantaan. Joten formData tarjoaa toisen menetelmän, jolla on sama syntaksi kuin append, mutta se poistaa kaikki kentät, joilla on annettu nimi ja lisää sitten uuden kentän. Siten se varmistaa, että siellä on ainutlaatuinen avain, jolla on nimi.
python-tavut merkkijonoon
formData.set(name, value) formData.set(name, blob, fileName)
Asetusmenetelmässä syntaksi toimii kuten append-metodi.
Kuinka iteroida FormData?
FormData tarjoaa menetelmän FormData.entries() toistaaksesi kaikki avaimet. Tämä menetelmä palauttaa iteraattorin, joka toistaa kaikki FormData-avain-/arvomerkinnät. Avain on merkkijonoobjekti, kun taas arvo voi olla joko blob tai merkkijono.
Harkitse alla olevaa esimerkkiä:
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]}`); } Yllä olevan esimerkin tulos on:
key1, value1 key2, value2
Lomakkeen lähettäminen tietotiedoston kanssa
Tiedostot voidaan lähettää myös FormDatalla. Tiedostot toimivat lomakeelementillä ja se lähetetään Content-Type: moniosainen/form-data. Multipart/form-data-koodaus mahdollistaa tiedostojen lähettämisen. Joten oletusarvoisesti se on osa lomaketietoja. Voimme lähettää tiedostot palvelimelle form-data-koodauksella.
Harkitse alla olevaa esimerkkiä:
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(); }; Yllä olevassa esimerkissä kuvaobjekti lähetetään binäärimuodossa FormData-tiedoston avulla. Voimme katsoa sen kehittäjätyökalun verkkovälilehdeltä:
Lomaketietojen lähettäminen Blob-objektina
Lomaketietojen lähettäminen blob-objektina on helppo tapa lähettää dynaamisesti luotuja binääritietoja. Se voi olla mikä tahansa kuva tai möykky; voimme lähettää sen suoraan palvelimelle välittämällä sen hakutekstissä.
On kätevää lähettää kuvatietoja ja muita lomaketietoja, kuten nimi, salasana jne. Palvelimet ovat myös ystävällisempiä ottamaan vastaan moniosaisia koodattuja lomakkeita binääritietojen sijaan.
Harkitse alla olevaa esimerkkiä, jossa kuva lähetetään yhdessä muiden lomaketietojen kanssa lomakkeena.
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); } Yllä olevassa esimerkissä voimme nähdä, että kuvablob on lisätty seuraavasti:
formData.append('image', imageBlob, 'image.webp');
Mikä on sama kuin , ja käyttäjä lähetti tiedoston, jonka nimi on 'image.webp', jossa on joitakin tietoja tiedostojärjestelmästä imageBlob. Palvelin lukee sen normaalimuotoisena datana.