Работа с FormData

FormData — это встроенный объект в JavaScript, предназначенный для удобной работы с данными форм. Он позволяет собирать значения полей формы и отправлять их на сервер через fetch или XMLHttpRequest без ручного кодирования в URL или JSON. Библиотека Umbrella JS упрощает взаимодействие с формами и интеграцию с FormData, предоставляя компактный и читаемый синтаксис.

Создание FormData из формы

В Umbrella JS выбор формы осуществляется через селектор, после чего можно сразу передать объект формы в FormData:

// Получение формы по идентификатору
var form = u('#myForm')[0]; // u() возвращает массив элементов
var formData = new FormData(form);

Особенности:

  • u('#myForm')[0] возвращает DOM-элемент формы, необходимый для конструктора FormData.
  • Все поля формы, включая скрытые (hidden), будут автоматически включены в FormData.
  • Для чекбоксов и радиокнопок учитываются только выбранные элементы.

Добавление данных вручную

Помимо автоматического сбора данных из формы, можно добавлять пары ключ-значение вручную:

formData.append('token', '123456');
formData.append('user', u('#username').val());

Важно:

  • append позволяет добавлять несколько значений под одним ключом, что полезно для полей с множественным выбором.
  • Значения могут быть строками или файлами (File, Blob).

Получение данных из FormData

Для инспекции или отладки можно перебрать содержимое объекта:

for (var [key, value] of formData.entries()) {
    console.log(key, value);
}
  • formData.entries() возвращает итератор пар [ключ, значение].
  • Альтернативно доступны методы get(key), getAll(key) и has(key) для точечного доступа.

Интеграция с AJAX через Umbrella JS

Umbrella JS облегчает отправку форм с использованием FormData:

u('#myForm').on('submit', function(e) {
    e.preventDefault();
    var form = this;
    var data = new FormData(form);

    fetch(form.action, {
        method: form.method,
        body: data
    })
    .then(response => response.json())
    .then(result => console.log(result))
    .catch(error => console.error(error));
});

Особенности подхода:

  • e.preventDefault() блокирует стандартную отправку формы.
  • fetch автоматически правильно кодирует FormData без необходимости вручную устанавливать заголовки Content-Type.
  • Можно комбинировать с методами Umbrella JS для манипуляций с формой: val(), attr(), find().

Работа с файлами

FormData позволяет включать файлы в отправку:

var fileInput = u('#fileInput')[0];
var files = fileInput.files;

for (var i = 0; i < files.length; i++) {
    data.append('files[]', files[i]);
}

Ключевые моменты:

  • Поддерживаются множественные файлы через массив files[].
  • Можно динамически добавлять файлы без изменения структуры формы.
  • Сочетается с fetch и серверными обработчиками, принимающими multipart/form-data.

Динамическое обновление FormData

Можно изменять данные после создания FormData:

// Удаление старого ключа
formData.delete('oldKey');

// Замена значения
formData.set('username', 'newUser');

// Проверка наличия ключа
if (formData.has('token')) {
    console.log('Токен присутствует');
}
  • delete удаляет все значения для ключа.
  • set заменяет существующее значение или создаёт новый ключ.
  • has удобен для проверки обязательных полей перед отправкой.

Комбинирование с другими методами Umbrella JS

Umbrella JS предоставляет удобные методы для получения данных формы и манипуляции элементами:

// Автоматическое добавление полей в FormData
var formData = new FormData();
u('#myForm input, #myForm select').each(function(el) {
    formData.append(el.name, u(el).val());
});
  • each позволяет перебрать все элементы формы и вручную собрать FormData.
  • Это полезно при динамически созданных полях, которых нет в DOM на момент загрузки.

Поддержка событий и валидации

FormData легко интегрируется с проверкой данных перед отправкой:

u('#myForm').on('submit', function(e) {
    e.preventDefault();
    var form = this;
    var data = new FormData(form);

    if (!data.get('email')) {
        alert('Email обязателен');
        return;
    }

    fetch(form.action, { method: form.method, body: data });
});
  • Любая валидация выполняется перед отправкой, используя методы get или has.
  • Можно комбинировать с динамической визуальной обратной связью через Umbrella JS (addClass, removeClass, text).

Резюме возможностей FormData с Umbrella JS

  • Прямое создание FormData из формы через DOM-элемент.
  • Добавление, изменение и удаление данных динамически.
  • Поддержка файлов и множественных значений.
  • Полная интеграция с AJAX (fetch) без ручного кодирования.
  • Лёгкая валидация и инспекция данных перед отправкой.
  • Сочетается с методами Umbrella JS для манипуляции DOM.

FormData в связке с Umbrella JS обеспечивает компактное, удобное и мощное решение для работы с формами и отправки данных на сервер в современных веб-приложениях.

Оглавление