A JavaScript FormData felülete módszert biztosít kulcs-érték párokkal rendelkező objektumok létrehozására. Ezek az objektumok megoszthatók az interneten keresztül a fetch() vagy XMLHttpRequest.send() metódussal. A HTML űrlapelem funkcióit használja. Ugyanazt a formátumot fogja használni, amelyet a „multipart/form-data” kódolástípusú űrlap használ.

Közvetlenül az URLSearchParams konstruktornak is átadhatjuk, hogy megkapjuk a lekérdezési paramétereket, ugyanúgy, mint a címke viselkedésében a GET kérés benyújtásakor.

Általában egy adatkészlet létrehozására szolgál, amely elküldi azt a szervernek. A FormData objektum tömbök tömbje, amely minden elemhez egy tömböt tartalmaz.

Ezek a tömbök a következő három értékkel rendelkeznek:

név: A mező nevét tartalmazza.

érték: Ez tartalmazza a mező értékét, amely lehet String vagy Blob objektum.

fájl név: Ez tartalmazza a fájlnevet, amely egy karakterlánc, amely tartalmazza a nevet. A név mentésre kerül a kiszolgálón, amikor egy blob objektumot 2-ként adnak át^ndparaméter.

Miért a FormData?

A HTML űrlapelemeket úgy fejlesztették ki, hogy azok automatikusan rögzítsék a mezőket és az értékeket. Ilyen esetekben a FormData felület segít nekünk HTML-űrlapok küldésében fájlokkal és további mezőkkel.

Ez egy olyan objektum, amely a felhasználó által bevitt űrlapadatokat tartalmazza.

Alább látható az űrlapadat-konstruktor:

 let formData = new FormData([form]); 

A FormData objektumok törzsként fogadhatók el olyan hálózati metódusokkal, mint például a fetch. Alapértelmezés szerint a Content-Type: multipart/form-data kódolásával és kiküldésével történik.

A szerver normál űrlapbeküldésnek tekinti.

Nézzünk meg egy egyszerű példát a FormData elküldésére.

Basic FormData küldése

Az alábbi űrlapon egy egyszerű FormData-t küldünk a szervernek.

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

A fenti példában nem állítunk be háttér-API-t az adatok küldéséhez, mert ez meghaladja az oktatóanyag hatókörét. Ellenőrizhetjük azonban a hálózati lap hasznos terhét, és megérthetjük a FormData interfész működését.

Tehát, ha megnézzük a hálózati kérést a fejlesztői eszközben, az alábbi hasznos terhelést fogja mutatni:

A fenti hálózati kérésben az űrlapadatok a hálózaton keresztül, a FormData objektum használatával kerülnek elküldésre. Más módokon több módszert is meg kell adnunk, hogy az adatokat megkapjuk az űrlapról.

Így a FormData felület segítségével egyszerűen elküldhetjük a formData-t a szervernek. Ez csak egy egysoros kód.

FormData Constructor

A FormData() konstruktor egy új FormData objektum létrehozására szolgál. A következő módokon használható:

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

Paraméterek:

űrlap (nem kötelező):

Ez egy HTML elem; ha meg van adva, akkor a FormData objektum az űrlap aktuális kulcsaival/értékeivel lesz feltöltve. A kulcsokhoz az egyes elemek name attribútum tulajdonságait, az értékekhez pedig azok beküldött értékét használja. A bemeneti fájl tartalmat is kódolja.

beküldő (opcionális):

A beküldő gomb egy űrlap eleme. Ha a beküldő elem név attribútum tulajdonsággal rendelkezik, akkor az adatai bekerülnek a FormData objektumba.

szelén

FormData Methods

A FormData számos módszert kínál, amelyek hasznosak lehetnek az űrlapmezők adatainak elérésében és módosításában.

Ritkábban előfordulhat, hogy módosítanunk kell az űrlapadatokat, mielőtt elküldjük a szervernek. Ezek a módszerek hasznosak lehetnek ezekben az esetekben.

Íme néhány hasznos formData módszer:

formData.append(név, érték)

Felveszi két argumentum nevét és értékét, és hozzáad egy űrlapmező objektumot a megadott névvel és értékkel.

formData.append(név, blob, fájlnév)

A név, blob és fájlnév argumentumokat veszi fel. Hozzáad egy mezőt az adatobjektumok létrehozásához, ha a HTML elem , majd a harmadik argumentum fileName beállítja a fájlnevet a felhasználó fájlrendszerében lévő fájlnév szerint.

formData.delete(név)

Nevet vesz fel argumentumként, és eltávolítja az azonos nevű mezőt.

formData.get(név)

Emellett argumentumként egy nevet is felvesz, és a megadott névvel együtt megkapja a megadott mező értékét.

formData.has(name)

A nevet is argumentumként veszi fel, ellenőrzi a mező létezését a megadott névvel, és ha létezik, true értéket ad vissza; egyébként hamis.

Egy űrlapon több azonos nevű mező is lehet, ezért több hozzáfűzési módszert kell megadnunk az azonos nevű mezők hozzáadásához.

Az azonos nevű mezők azonban hibákat okoznak, és bonyolulttá teszik a beállításukat az adatbázisban. Tehát a formData egy másik metódust is biztosít, ugyanolyan szintaxissal, mint az append, de eltávolítja az összes megadott nevű mezőt, majd új mezőt fűz hozzá. Így biztosítja, hogy legyen egy egyedi kulcs névvel.

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

A set metódusban a szintaxis úgy működik, mint az append metódus.

Hogyan iterálhatjuk a FormData-t?

A FormData egy FormData.entries() metódust biztosít az összes kulcson keresztüli iterációhoz. Ez a metódus egy iterátort ad vissza, amely végigfut a FormData összes kulcs/érték bejegyzésén. A kulcs egy karakterlánc objektum, míg az érték lehet blob vagy karakterlánc.

Tekintsük az alábbi példát:

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

A fenti példa kimenete a következő lesz:

script shell végrehajtása

 key1, value1 key2, value2 

Űrlap küldése adatfájllal

A fájlok a FormData használatával is elküldhetők. A fájlok az űrlapelemen dolgoznak, és Content-Type: multipart/form-data formában kerülnek elküldésre. A multipart/form-data kódolás lehetővé teszi a fájlok küldését. Tehát alapértelmezés szerint az űrlapadatok része. A fájlokat form-data kódolással tudjuk elküldeni a szerverre.

Tekintsük az alábbi példát:

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

A fenti példában a képobjektum bináris formátumban kerül elküldésre a FormData használatával. Megnézhetjük a fejlesztői eszköz hálózat lapján:

Űrlapadatok küldése Blob objektumként

Az űrlapadatok blob-objektumként történő küldése egyszerű módja a dinamikusan előállított bináris adatok elküldésének. Lehet bármilyen kép vagy folt; közvetlenül elküldhetjük a szervernek, ha átadjuk a letöltési törzsben.

Kényelmes a képadatok és egyéb űrlapadatok, például név, jelszó stb. küldése. Ezenkívül a szerverek barátságosabbak a többrészes kódolású űrlapok elfogadásában a bináris adatok helyett.

Tekintsük az alábbi példát, amely a képet a többi űrlapadattal együtt küldi el űrlapként.

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

A fenti példában láthatjuk, hogy a képblob a következőképpen lett hozzáadva:

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

Ez ugyanaz, mint egy , és a felhasználó beküldött egy 'image.webp' nevű fájlt néhány imageBlob adattal a fájlrendszerből. A szerver normál formátumú adatként olvassa be.