Interfața JavaScript FormData oferă o metodă de a crea un obiect având perechi cheie-valoare. Aceste obiecte pot fi partajate pe internet folosind metoda fetch() sau XMLHttpRequest.send(). Utilizează funcționalitatea elementului de formular HTML. Acesta va folosi același format care va fi folosit de o formă de tipul de codificare setat la „multipart/form-data”.
De asemenea, îl putem transmite direct către constructorul URLSearchParams pentru a obține parametrii de interogare la fel ca în comportamentul etichetei la trimiterea cererii GET.
În general, este folosit pentru a crea un set de date care să îl trimită către server. Obiectul FormData este o matrice de matrice care conține o matrice pentru fiecare element.
Aceste matrice au următoarele trei valori:
Nume: Conține numele câmpului.
valoare: Conține valoarea câmpului, care poate fi un obiect String sau Blob.
nume de fișier: Conține numele fișierului care este un șir care conține numele. Numele va fi salvat pe server atunci când un obiect blob este trecut ca 2ndparametru.
De ce FormData?
Elementele de formular HTML sunt dezvoltate într-un mod care captează automat câmpurile și valorile acestuia. În astfel de scenarii, interfața FormData ne ajută să trimitem formulare HTML cu sau fără fișiere și câmpuri suplimentare.
Este un obiect care conține datele din formular introduse de utilizator.
Mai jos este constructorul de date al formularului:
let formData = new FormData([form]);
Obiectele FormData pot fi acceptate ca un corp prin metodele de rețea, cum ar fi fetch. Este codificat și trimis cu Content-Type: multipart/form-data în mod implicit.
Serverul îl va considera drept trimitere obișnuită a formularului.
Să înțelegem un exemplu simplu de trimitere a FormData.
Trimiterea unui FormData de bază
În formularul de mai jos, trimitem un simplu FormData către server.
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); }; În exemplul de mai sus, nu am configurat niciun API de backend pentru trimiterea datelor, deoarece acest lucru depășește scopul acestui tutorial. Dar, putem verifica sarcina utilă în fila de rețea și putem înțelege cum funcționează interfața FormData.
Deci, dacă ne uităm la cererea de rețea în instrumentul pentru dezvoltatori, aceasta va afișa sarcina utilă de mai jos:
În cererea de rețea de mai sus, datele formularului sunt trimise prin rețea folosind obiectul FormData. În alte moduri, trebuie să specificăm mai multe metode pentru a obține datele din formular.
Astfel, folosind interfața FormData, putem trimite cu ușurință formData către server. Este doar un cod cu o singură linie.
FormData Constructor
Constructorul FormData() este folosit pentru a crea un nou obiect FormData. Poate fi folosit în următoarele moduri:
new FormData() new FormData(form) new FormData(form, submitter)
Parametri:
formular (Opțional):
Este un element HTML; dacă este specificat, obiectul FormData va fi populat cu cheile/valorile curente ale formularului. Utilizează proprietățile atributului nume ale fiecărui element pentru chei și valoarea lor trimisă pentru valori. De asemenea, codifică conținutul de intrare al fișierului.
expeditor (Opțional):
Butonul de trimitere este un element al unui formular. Dacă elementul de trimitere are o proprietate de atribut nume, atunci datele sale vor fi incluse în obiectul FormData.
scan.nextstring java
Metode FormData
FormData oferă mai multe metode care pot fi utile în accesarea și modificarea datelor câmpurilor de formular.
În mai puține cazuri, este posibil să fie nevoie să modificăm datele formularului înainte de a le trimite la server. Aceste metode pot fi utile în aceste cazuri.
Mai jos sunt câteva metode utile formData:
formData.append(nume, valoare)
Acesta ia numele și valoarea a două argumente și adaugă un obiect câmp de formular cu numele și valoarea furnizate.
formData.append(nume, blob, fileName)
Ia argumentele nume, blob și fileName. Se adaugă un câmp pentru a forma obiecte de date dacă elementul HTML este , apoi al treilea argument fileName setează numele fișierului conform numelui fișierului din sistemul de fișiere al utilizatorului.
formData.delete(nume)
Acesta ia un nume ca argument și elimină câmpul specificat având același nume.
formData.get(nume)
De asemenea, ia un nume ca argument și primește valoarea câmpului specificat cu numele dat.
formData.has(nume)
De asemenea, ia numele ca argument, verifică existența câmpului cu numele dat și returnează adevărat dacă există; altfel fals.
Un formular poate avea mai multe câmpuri cu același nume, așa că trebuie să specificăm mai multe metode de adăugare pentru a adăuga toate acele câmpuri cu același nume.
Dar câmpurile cu același nume vor cauza erori și vor crea complexitate în setarea lor în baza de date. Deci, formData oferă o altă metodă cu aceeași sintaxă ca append, dar elimină toate câmpurile cu numele dat și apoi adaugă un câmp nou. Astfel, se asigură că va exista o cheie unică cu un nume.
formData.set(name, value) formData.set(name, blob, fileName)
În metoda set, sintaxa funcționează ca metoda append.
Cum se repetă FormData?
FormData oferă o metodă FormData.entries() pentru a itera prin toate cheile sale. Această metodă returnează un iterator care iterează prin toate intrările cheie/valoare din FormData. O cheie este un obiect șir, în timp ce valoarea poate fi fie un blob, fie un șir.
Luați în considerare exemplul de mai jos:
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]}`); } Rezultatul exemplului de mai sus va fi:
key1, value1 key2, value2
Trimiterea unui formular cu un fișier de date
Fișierele pot fi trimise și folosind FormData. Fișierele funcționează pe elementul formular și sunt trimise ca tip de conținut: multipart/form-data. Codarea în mai multe părți/form-date permite trimiterea fișierelor. Deci, implicit, este o parte a datelor din formular. Putem trimite fișierele către server cu codificarea datelor din formular.
Luați în considerare exemplul de mai jos:
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(); }; În exemplul de mai sus, obiectul imagine este trimis în format binar folosind FormData. Îl putem căuta în fila de rețea a instrumentului pentru dezvoltatori:
Trimiterea datelor din formular ca obiect Blob
Trimiterea datelor din formular ca obiect blob este o modalitate ușoară de a trimite datele binare generate dinamic. Ar putea fi orice imagine sau blob; îl putem trimite direct la server trecându-l în corpul de preluare.
Este convenabil să trimiteți date de imagine și alte date de formular, cum ar fi numele, parola, etc. De asemenea, serverele sunt mai prietenoase să accepte formulare codificate în mai multe părți decât date binare.
Luați în considerare exemplul de mai jos, care trimite imaginea împreună cu celelalte date din formular ca formular.
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); } În exemplul de mai sus, putem vedea că blob-ul de imagine este adăugat după cum urmează:
cifre romane 1100
formData.append('image', imageBlob, 'image.webp');
Care este același cu un , iar utilizatorul a trimis un fișier cu numele „image.webp” cu unele date imageBlob din sistemul de fișiere. Serverul îl va citi ca date în formă normală.