ЈаваСцрипт ФормДата интерфејс обезбеђује метод за креирање објекта који има парове кључ-вредност. Ови објекти се могу делити преко интернета помоћу метода фетцх() или КСМЛХттпРекуест.сенд(). Користи функционалност елемента ХТМЛ обрасца. Користиће исти формат који ће користити форма типа кодирања је подешена на 'мултипарт/форм-дата'.
Такође можемо да га проследимо директно конструктору УРЛСеарцхПарамс да бисмо добили параметре упита баш као у понашању ознаке у подношењу ГЕТ захтева.
Генерално, користи се за креирање скупа података који ће их послати на сервер. ФормДата објекат је низ низова који садржи један низ за сваки елемент.
Ови низови имају следеће три вредности:
име: Садржи назив поља.
вредност: Садржи вредност поља, која може бити стринг или Блоб објекат.
назив документа: Садржи име датотеке које је низ који садржи име. Име ће бити сачувано на серверу када се блоб објекат проследи као 2ндпараметар.
Зашто ФормДата?
Елементи ХТМЛ обрасца су развијени на начин који аутоматски хвата своја поља и вредности. У таквим сценаријима, интерфејс ФормДата нам помаже да шаљемо ХТМЛ обрасце са или без датотека и додатних поља.
То је објекат који садржи податке обрасца које је унео корисник.
Испод је конструктор података обрасца:
let formData = new FormData([form]);
Објекти ФормДата могу бити прихваћени као тело помоћу мрежних метода као што је дохват. Подразумевано је кодиран и послат са Цонтент-Типе: мултипарт/форм-дата.
Сервер ће то сматрати редовним подношењем обрасца.
Хајде да разумемо једноставан пример слања ФормДата.
Слање основног обрасца података
У доњем обрасцу шаљемо једноставан ФормДата серверу.
Индек.хтмл:
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); }; У горњем примеру, не постављамо никакав позадински АПИ за слање података јер је то ван оквира овог упутства. Али, можемо да проверимо корисно оптерећење на картици мреже и да разумемо како функционише интерфејс ФормДата.
Дакле, ако погледамо мрежни захтев у алатки за програмере, он ће показати следеће корисно оптерећење:
У горњем мрежном захтеву, подаци обрасца се шаљу преко мреже користећи ФормДата објекат. На друге начине, морамо да наведемо више метода да бисмо добили податке из обрасца.
Дакле, користећи ФормДата интерфејс, можемо лако послати формДата на сервер. То је само једноредни код.
ФормДата Цонструцтор
Конструктор ФормДата() се користи за креирање новог објекта ФормДата. Може се користити на следеће начине:
new FormData() new FormData(form) new FormData(form, submitter)
Параметри:
образац (опционо):
То је ХТМЛ елемент; ако је наведен, објекат ФормДата ће бити попуњен тренутним кључевима/вредностима обрасца. Користи својства атрибута имена сваког елемента за кључеве и њихову достављену вредност за вредности. Такође кодира улазни садржај датотеке.
подносилац (опционо):
Дугме подносиоца је елемент обрасца. Ако елемент подносиоца има својство атрибута наме, онда ће његови подаци бити укључени у објекат ФормДата.
јава ламбда пример
ФормДата Метходс
ФормДата пружа неколико метода које могу бити од помоћи у приступу и модификовању података поља обрасца.
У мањем броју случајева, можда ћемо морати да променимо податке обрасца пре него што их пошаљемо на сервер. Ове методе могу бити од помоћи у овим случајевима.
Следе неке корисне формДата методе:
формДата.аппенд(име, вредност)
Узима име и вредност два аргумента и додаје објекат поља обрасца са наведеним именом и вредношћу.
јава за паузу
формДата.аппенд(наме, блоб, филеНаме)
Узима аргументе наме, блоб и филеНаме. Додаје поље за формирање објеката података ако је ХТМЛ елемент , затим трећи аргумент филеНаме поставља име датотеке према имену датотеке у систему датотека корисника.
формДата.делете(наме)
Узима име као аргумент и уклања наведено поље са истим именом.
формДата.гет(име)
Такође узима име као аргумент и добија вредност наведеног поља са датим именом.
формДата.хас(име)
Такође узима име као аргумент, проверава постојање поља са датим именом и враћа труе ако постоји; иначе лажно.
Образац може имати више поља са истим именом, тако да морамо да наведемо више метода додавања да бисмо додали сва поља са истим именом.
Али поља са истим именом ће узроковати грешке и створити сложеност у њиховом постављању у бази података. Дакле, формДата пружа други метод са истом синтаксом као и аппенд, али уклања сва поља са датим именом и затим додаје ново поље. Тако се осигурава да ће постојати јединствени кључ са именом.
formData.set(name, value) formData.set(name, blob, fileName)
У методи сет синтакса функционише као метода додавања.
Како итерирати ФормДата?
ФормДата обезбеђује метод ФормДата.ентриес() за понављање кроз све његове кључеве. Овај метод враћа итератор који пролази кроз све уносе кључа/вредности у ФормДата. Кључ је стринг објекат, док вредност може бити или блоб или стринг.
Размотрите следећи пример:
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]}`); } Резултат горњег примера ће бити:
key1, value1 key2, value2
Слање обрасца са датотеком података
Датотеке се такође могу послати помоћу ФормДата. Датотеке раде на елементу обрасца и шаљу се као Цонтент-Типе: мултипарт/форм-дата. Мултипарт/форм-дата кодирање омогућава слање датотека. Дакле, подразумевано је део података обрасца. Можемо послати датотеке на сервер са кодирањем података обрасца.
Размотрите следећи пример:
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(); }; У горњем примеру, објекат слике се шаље у бинарном формату користећи ФормДата. Можемо га погледати на картици мреже алатке за програмере:
Слање података обрасца као Блоб објекта
Слање података обрасца као блоб објекта је једноставан начин за слање динамички генерисаних бинарних података. То може бити било која слика или мрља; можемо га директно послати серверу тако што ћемо га проследити у телу преузимања.
Погодно је слати сликовне податке и друге податке из образаца као што су име, лозинка итд. Такође, сервери су лакши за прихватање вишеделних кодираних образаца уместо бинарних података.
Размотрите доњи пример, који шаље слику заједно са другим подацима обрасца као образац.
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); } У горњем примеру, можемо видети да је блоб слике додат на следећи начин:
formData.append('image', imageBlob, 'image.webp');
Што је исто као и , а корисник је послао датотеку са именом 'имаге.вебп' са неким подацима имагеБлоб из система датотека. Сервер ће их прочитати као податке у нормалном облику.