Интерфейсът на JavaScript FormData предоставя метод за създаване на обект с двойки ключ-стойност. Тези обекти могат да се споделят по интернет чрез метод fetch() или XMLHttpRequest.send(). Той използва функционалността на елемента на HTML формуляра. Той ще използва същия формат, който ще бъде използван от формуляр с тип кодиране, зададен на „multipart/form-data“.
Можем също да го предадем директно на конструктора URLSearchParams, за да получим параметрите на заявката точно както в поведението на маркера при изпращане на GET заявка.
Обикновено се използва за създаване на набор от данни, който да бъде изпратен на сървъра. Обектът FormData е масив от масиви, който съдържа по един масив за всеки елемент.
Тези масиви имат следните три стойности:
име: Съдържа името на полето.
стойност: Той съдържа стойността на полето, която може да бъде String или Blob обект.
име на файл: Той съдържа името на файла, което е низ, съдържащ името. Името ще бъде запазено на сървъра, когато blob обект бъде подаден като 2ndпараметър.
Защо FormData?
Елементите на HTML формуляра са разработени по начин, който автоматично улавя неговите полета и стойности. В такива сценарии интерфейсът FormData ни помага да изпращаме HTML формуляри със или без файлове и допълнителни полета.
Това е обект, който съдържа данните от формата, въведени от потребителя.
По-долу е конструкторът на данни за формуляр:
let formData = new FormData([form]);
Обектите FormData могат да бъдат приети като тяло от мрежовите методи като fetch. Той е кодиран и изпратен с Content-Type: multipart/form-data по подразбиране.
Сървърът ще го счита за редовно изпращане на формуляр.
Нека разберем прост пример за изпращане на FormData.
Изпращане на Basic FormData
Във формуляра по-долу изпращаме прост 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); }; В горния пример ние не настройваме API за задната част за изпращане на данните, защото това е извън обхвата на този урок. Но можем да проверим полезния товар към мрежовия раздел и да разберем как работи интерфейсът FormData.
Така че, ако разгледаме мрежовата заявка в инструмента за разработчици, тя ще покаже следния полезен товар:
В горната мрежова заявка данните за формуляра се изпращат по мрежата с помощта на обекта FormData. По други начини трябва да посочим множество методи за получаване на данните от формуляра.
По този начин, използвайки интерфейса FormData, можем лесно да изпратим formData на сървъра. Това е само едноредов код.
Конструктор FormData
Конструкторът FormData() се използва за създаване на нов обект FormData. Може да се използва по следните начини:
new FormData() new FormData(form) new FormData(form, submitter)
Параметри:
форма (по избор):
Това е HTML елемент; ако е указано, обектът FormData ще бъде попълнен с текущите ключове/стойности на формуляра. Той използва свойствата на атрибута name на всеки елемент за ключовете и тяхната подадена стойност за стойностите. Той също така кодира въведеното съдържание на файла.
подател (по избор):
Бутонът за изпращане е елемент от формуляр. Ако елементът на подателя има свойство на атрибут name, тогава неговите данни ще бъдат включени в обекта FormData.
мултиплексор две към едно
Методи на FormData
FormData предоставя няколко метода, които могат да бъдат полезни при достъп и модифициране на данните в полетата на формуляра.
В по-малко случаи може да се наложи да променим данните на формуляра, преди да ги изпратим на сървъра. Тези методи могат да бъдат полезни в тези случаи.
Следват някои полезни методи на formData:
formData.append(име, стойност)
Той взема името и стойността на два аргумента и добавя обект на поле на формуляр с предоставеното име и стойност.
formData.append(име, петно, име на файл)
Той приема аргументите име, blob и fileName. Той добавя поле за формиране на обекти с данни, ако HTML елементът е , тогава третият аргумент fileName задава името на файла според името на файла във файловата система на потребителя.
formData.delete(име)
Той приема име като аргумент и премахва посоченото поле със същото име.
formData.get(име)
Той също така приема име като аргумент и получава стойността на определеното поле с даденото име.
formData.has(име)
Той също така приема името като аргумент, проверява съществуването на полето с даденото име и връща true, ако съществува; иначе невярно.
Един формуляр може да има множество полета с едно и също име, така че трябва да посочим множество методи за добавяне, за да добавим всички тези едноименни полета.
Но едноименните полета ще причинят грешки и ще усложнят настройването им в базата данни. И така, formData предоставя друг метод със същия синтаксис като append, но премахва всички полета с даденото име и след това добавя ново поле. По този начин се гарантира, че ще има уникален ключ с име.
formData.set(name, value) formData.set(name, blob, fileName)
В метода set синтаксисът работи като метода append.
Как да повторя FormData?
FormData предоставя метод FormData.entries() за итерация през всички негови ключове. Този метод връща итератор, който преминава през всички записи ключ/стойност във FormData. Ключът е низов обект, докато стойността може да бъде петно или низ.
Разгледайте примера по-долу:
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
Изпращане на формуляр с файл с данни
Файловете могат да се изпращат и с помощта на FormData. Файловете работят върху елемента на формуляра и той се изпраща като Content-Type: multipart/form-data. Кодирането на multipart/form-data позволява изпращане на файлове. Така че по подразбиране е част от данните на формуляра. Можем да изпратим файловете на сървъра с кодирането на формуляр-данни.
Разгледайте примера по-долу:
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(); }; В горния пример обектът на изображението се изпраща в двоичен формат с помощта на FormData. Можем да го разгледаме в раздела мрежа на инструмента за разработчици:
Изпращане на данни от формуляр като Blob обект
Изпращането на данни от формуляра като blob обект е лесен начин за изпращане на динамично генерираните двоични данни. Може да е всяко изображение или петно; можем директно да го изпратим на сървъра, като го предадем в тялото на извличане.
Удобно е да се изпращат данни за изображения и други данни за формуляри, като име, парола и т.н. Освен това сървърите са по-удобни за приемане на формуляри, кодирани от няколко части, а не на двоични данни.
Помислете за примера по-долу, който изпраща изображението заедно с другите данни на формуляра като формуляр.
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');
Което е същото като , и потребителят изпрати файл с име „image.webp“ с някои данни imageBlob от файловата система. Сървърът ще го прочете като данни от нормален формуляр.
обработка на низове в c++