JavaScript FormData saskarne nodrošina metodi, lai izveidotu objektu ar atslēgu un vērtību pāriem. Šos objektus var koplietot internetā, izmantojot metodi fetch() vai XMLHttpRequest.send(). Tas izmanto HTML formas elementa funkcionalitāti. Tas izmantos to pašu formātu, ko izmantos forma, kuras kodēšanas veids ir iestatīts uz “multipart/form-data”.
Mēs to varam arī nodot tieši URLSearchParams konstruktoram, lai iegūtu vaicājuma parametrus tāpat kā tagu darbībā, iesniedzot GET pieprasījumu.
Parasti to izmanto, lai izveidotu datu kopu, kas jānosūta uz serveri. FormData objekts ir masīvu masīvs, kurā ir viens masīvs katram elementam.
Šiem masīviem ir šādas trīs vērtības:
nosaukums: Tas satur lauka nosaukumu.
vērtība: Tas satur lauka vērtību, kas var būt String vai Blob objekts.
faila nosaukums: Tas satur faila nosaukumu, kas ir virkne ar nosaukumu. Nosaukums tiks saglabāts serverī, kad blob objekts tiks nodots kā 2ndparametrs.
Kāpēc FormData?
HTML veidlapas elementi ir izstrādāti tā, lai automātiski uztvertu laukus un vērtības. Šādos gadījumos FormData saskarne palīdz mums nosūtīt HTML veidlapas ar vai bez failiem un papildu laukiem.
Tas ir objekts, kas satur veidlapas datus, ko ievadījis lietotājs.
Zemāk ir veidlapas datu konstruktors:
let formData = new FormData([form]);
FormData objektus var pieņemt kā pamattekstu, izmantojot tīkla metodes, piemēram, ielāde. Pēc noklusējuma tas tiek kodēts un izsūtīts ar satura veidu: vairāku daļu/formas dati.
Serveris to uzskatīs par parastu veidlapas iesniegšanu.
Sapratīsim vienkāršu FormData nosūtīšanas piemēru.
Basic FormData nosūtīšana
Zemāk esošajā veidlapā mēs serverim nosūtām vienkāršu 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); }; Iepriekš minētajā piemērā mēs neiestatām aizmugursistēmas API datu nosūtīšanai, jo tas ir ārpus šīs apmācības darbības jomas. Taču mēs varam pārbaudīt tīkla cilnes lietderīgo slodzi un saprast, kā darbojas FormData saskarne.
Tātad, ja mēs skatāmies uz tīkla pieprasījumu izstrādātāja rīkā, tas parādīs tālāk norādīto slodzi:
Iepriekš minētajā tīkla pieprasījumā veidlapas dati tiek nosūtīti tīklā, izmantojot objektu FormData. Citos veidos mums ir jānorāda vairākas metodes, lai iegūtu datus no veidlapas.
Tādējādi, izmantojot FormData saskarni, mēs varam viegli nosūtīt formData uz serveri. Tas ir tikai vienas līnijas kods.
FormData konstruktors
FormData() konstruktors tiek izmantots, lai izveidotu jaunu FormData objektu. To var izmantot šādos veidos:
new FormData() new FormData(form) new FormData(form, submitter)
Parametri:
veidlapa (neobligāti):
Tas ir HTML elements; ja tas ir norādīts, FormData objekts tiks aizpildīts ar formas pašreizējām atslēgām/vērtībām. Tas izmanto katra elementa nosaukuma atribūta rekvizītus atslēgām un to iesniegto vērtību vērtībām. Tas arī kodē faila ievades saturu.
iesniedzējs (neobligāti):
Iesniedzēja poga ir veidlapas elements. Ja iesniedzēja elementam ir atribūta rekvizīts name, tad tā dati tiks iekļauti objektā FormData.
c kods abs
FormData metodes
FormData nodrošina vairākas metodes, kas var būt noderīgas, lai piekļūtu veidlapas lauku datiem un mainītu tos.
Retos gadījumos mums var būt nepieciešams mainīt veidlapas datus pirms to nosūtīšanas uz serveri. Šīs metodes var būt noderīgas šajos gadījumos.
Tālāk ir norādītas dažas noderīgas formData metodes.
formData.append(nosaukums, vērtība)
Tas izmanto divu argumentu nosaukumu un vērtību un pievieno formas lauka objektu ar norādīto nosaukumu un vērtību.
formData.append(nosaukums, lāse, faila nosaukums)
Tas aizņem nosaukuma, lāse un faila nosaukuma argumentus. Tas pievieno lauku datu objektu veidošanai, ja HTML elements ir , tad trešais arguments fileName iestata faila nosaukumu atbilstoši faila nosaukumam lietotāja failu sistēmā.
formData.delete(nosaukums)
Tas izmanto nosaukumu kā argumentu un noņem norādīto lauku ar tādu pašu nosaukumu.
formData.get(nosaukums)
Tas arī izmanto nosaukumu kā argumentu un iegūst norādītā lauka vērtību ar doto nosaukumu.
formData.has(nosaukums)
Tas arī izmanto nosaukumu kā argumentu, pārbauda lauka esamību ar doto nosaukumu un atgriež true, ja tāds pastāv; citādi viltus.
Veidlapā var būt vairāki lauki ar vienādu nosaukumu, tāpēc mums ir jānorāda vairākas pievienošanas metodes, lai pievienotu visus šos laukus ar vienādu nosaukumu.
Taču lauki ar tādu pašu nosaukumu radīs kļūdas un sarežģīs to iestatīšanu datu bāzē. Tātad formData nodrošina citu metodi ar tādu pašu sintaksi kā pievienošana, taču tā noņem visus laukus ar doto nosaukumu un pēc tam pievieno jaunu lauku. Tādējādi tas nodrošina, ka būs unikāla atslēga ar nosaukumu.
formData.set(name, value) formData.set(name, blob, fileName)
Iestatītajā metodē sintakse darbojas tāpat kā pievienošanas metode.
Kā atkārtot FormData?
FormData nodrošina metodi FormData.entries(), lai atkārtotu visas tās atslēgas. Šī metode atgriež iteratoru, kas atkārto visus atslēgas/vērtības ierakstus FormData. Atslēga ir virknes objekts, savukārt vērtība var būt vai nu lāse, vai virkne.
Apsveriet tālāk sniegto piemēru:
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]}`); } Iepriekš minētā piemēra izvade būs šāda:
key1, value1 key2, value2
Veidlapas nosūtīšana ar datu failu
Failus var nosūtīt arī, izmantojot FormData. Faili darbojas ar formas elementu, un tie tiek nosūtīti kā satura veids: vairāku daļu/formas dati. Vairāku daļu/formu datu kodējums ļauj nosūtīt failus. Tātad pēc noklusējuma ir daļa no veidlapas datiem. Mēs varam nosūtīt failus uz serveri ar form-data kodējumu.
Apsveriet tālāk sniegto piemēru:
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(); }; Iepriekš minētajā piemērā attēla objekts tiek nosūtīts binārā formātā, izmantojot FormData. Mēs to varam apskatīt izstrādātāja rīka tīkla cilnē:
Veidlapas datu sūtīšana kā Blob objekts
Veidlapas datu sūtīšana kā lāse objektu ir vienkāršs veids, kā nosūtīt dinamiski ģenerētus bināros datus. Tas var būt jebkurš attēls vai lāse; mēs varam to tieši nosūtīt serverim, nododot to ieneses pamattekstā.
Ir ērti nosūtīt attēlu datus un citus veidlapu datus, piemēram, vārdu, paroli utt. Tāpat serveri ir draudzīgāki, lai pieņemtu vairāku daļu kodētas formas, nevis bināros datus.
sapludināt kārtot java
Apsveriet tālāk sniegto piemēru, kurā kā veidlapa tiek nosūtīts attēls kopā ar citiem veidlapas datiem.
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); } Iepriekš minētajā piemērā mēs redzam, ka attēla lāse ir pievienota šādi:
formData.append('image', imageBlob, 'image.webp');
Kas ir tas pats, kas , un lietotājs iesniedza failu ar nosaukumu “image.webp” ar dažiem datiem imageBlob no failu sistēmas. Serveris tos nolasīs kā parastās formas datus.