Эта статья продемонстрирует объект FormData в JavaScript с помощью самых простых примеров.
Что такое объект FormData в JavaScript?
Объект FormData — это популярный подход к созданию коллекции данных в JavaScript, которую можно отправить на сервер с помощью « XMLHttpRequest 'или извлечено. Он выполняет те же функции, что и элемент формы HTML. Его можно сравнить с массивом массивов. Отдельный массив представляет каждый элемент, который мы хотим передать на сервер.
Синтаксис
Чтобы использовать объект FormData в JavaScript, используйте следующий синтаксис:
константа formData '=' новый Данные формы ( ) ;
Пример 1: создание объекта FormData без HTML-формы
Прежде всего, инициализируйте константу с определенным именем и присвойте этой константе определенное значение. Здесь « новые данные формы() ” используется как постоянное значение:
Постоянная formData '=' новый Данные формы ( ) ;
Затем добавьте данные, передав аргументы в « добавить() метод
данные формы. добавить ( 'Фимя' , «Офицер» ) ;данные формы. добавить ( 'Имя' , 'Джавед' ) ;
данные формы. добавить ( 'возраст' , 25 ) ;
После этого используйте « console.log() метод:
консоль. бревно ( «Информация о форме» ) ;
Использовать ' для » для итерации и отображения вывода на консоли с помощью « console.log() метод:
для ( пусть объект formData ) {консоль. бревно ( объект ) ;
}
Пример 2. Создание объекта FormData с помощью HTML-формы
Чтобы добавить FormData с HTML-формой, сначала создайте форму в HTML с помощью « <форма> ” и добавьте следующий атрибут, указанный ниже:
- Чтобы добавить поле ввода в форму, используйте кнопку « <ввод> элемент.
- Внутри тега ввода укажите « тип », чтобы определить тип данных элемента. Для этого атрибута существует несколько возможных значений, в том числе « текст », « число », « дата », « пароль ', и многое другое.
- “ заполнитель ” используется для добавления значения для отображения в поле ввода, а “имя” относится к имени поля ввода.
- “ по щелчку ” запускается, когда пользователь выполняет какую-либо функцию, щелкая мышью:
< тип ввода '=' 'текст' имя '=' 'Фимя' заполнитель '=' 'Введите свое имя' >< бр >< бр >
< тип ввода '=' 'текст' имя '=' 'Имя' заполнитель '=' «Введите свою фамилию» >< бр >< бр >
< тип ввода '=' 'дата' имя '=' 'возраст' заполнитель '=' 'Введите свой возраст' >< бр >< бр >
< тип ввода '=' 'кнопка' ценить '=' 'Входить' по щелчку '=' 'данные()' >
форма >
Затем откройте форму в CSS и установите пространство вокруг формы:
. форма {допуск : 20 пикселей ;
набивка : 30 пикселей ;
}
Кроме того, используйте тег script и добавьте следующий код:
функциональные данные ( ) {была форма '=' документ. получитьэлементбиид ( 'форма' ) ;
constformData '=' новые данные формы ( форма ) ;
консоль. бревно ( «Данные формы» ) ;
для ( пусть obj offormData ) {
консоль. бревно ( объект ) ;
}
}
В приведенном выше фрагменте кода:
- Вызвать « получитьэлемент по идентификатору («форма») ” для доступа к форме с использованием идентификатора формы.
- Теперь сохраните полученный элемент в новую константу». formData ».
- Использовать ' для » для итерации и распечатайте элементы на консоли.
Выход
Вы узнали о создании объекта FormData в JavaScript.
Заключение
Объект FormData используется для создания набора данных в JavaScript, которые можно отправить на сервер. Чтобы создать объект Formdata в JavaScript, демонстрируются два метода. В первом используется простой JavaScript, а во втором — создание формы в HTML и связывание ее с JavaScript. В этом посте говорится об объектах FormData в JavaScript.