Uvod

js this

Korišćenje FormData interfejsa prilično olakšava rad sa formama, jer je u stanju da jednostavno pokupi sve vrednosti input-a u formi i sačuva ih u objektu u vidu key/value parova.
Dodatna prednost nad standardnim metodom vezana je za olakšano pisanje serverskog koda. Sa standardnim metodom moramo dodati određeni kod na strani servera koji bi dolazne podatke obradio na specijalizovan način, dok sa FormData to nije potrebno, jer je poslati kod standardizovan i debug-ovan! Treba naglasiti da u formi svi HTML input tag-ovi moraju da imaju atribut ‘name’, jer FormData preko njega ima pristup vrednostima input-a.

Sintaksa

a) Prikupljanje podataka iz cele forme

Kada želimo da pokupimo sve vrednosti inputa forme onda koristimo:

FormData objekat se popunjava sa keys/values parovima. JavaScript koristi name svojstvo za svaki element forme kao keys i pridružuje mu enkodovanu vrednost ulaza.

Primer:

JavaScript

PHP (submit.php)

formData primer

b) Prikupljanje specifičnog podataka iz forme

Ukoliko želimo da FormData objektu pridružimo samo jedan podatak (tj. jedan par key/value), potrebno je da napravimo prazan formData objekata kome naknadno dodajemo željene key/vrednost

onda možemo da koristimo i sledeću syntax-u:

Na server stiže:

MDN snippet

EventHandler snippet

Ukoliko imate više formi da ne bi ponavljali kod možemo da koristimo snippet preporučen od MDN zajednice koji pokriva sve moguće načine slanja podataka. U kodu je definisana funkcija AJAXSubmit koja prihvata form objekat kao argument. Nakon toga je dovoljno u svakoj našoj formi samo definisati callback nakon submit-a forme onsubmit="AJAXSubmit(this);.

Primena MDN snippeta

Da bi prethodni snippet imao svrhu potrebno je da se kroz atribut forme definiše koja je EventHandler funkcija onsubmit="AJAXSubmit(this)

Ukoliko se iz forme prikupljaju podaci različitih tipova (ako se pored teksta šalju i fajlovi), onda telo zahteva mora da se sastoji iz delova koji su odvojeni sa granicama “boundary”. Stoga je potrebno da u header-u postoji “Content-Type” polje koje definiše “multipart” telo enctype="multipart/form-data"

The content type “application/x-www-form-urlencoded” is inefficient for sending large quantities of binary data or text containing non-ASCII characters. The content type “multipart/form-data” should be used for submitting forms that contain files, non-ASCII data, and binary data.
https://www.w3.org

Primer

multipart formdata

Pogledajte slične članke...

Podelite:

Ostavite komentar