Отправка форм через AJAX

Umbrella JS — это компактная и удобная библиотека для работы с DOM, которая позволяет значительно сократить объём кода по сравнению с чистым JavaScript. Одним из распространённых сценариев является отправка форм без перезагрузки страницы с помощью AJAX. Рассмотрим пошагово, как реализовать этот процесс.

Выбор формы и обработка события submit

Для начала необходимо получить ссылку на форму и добавить обработчик события submit. В Umbrella JS выбор элементов осуществляется с помощью функции u().

u('#myForm').on('submit', function(event) {
    event.preventDefault(); // предотвращает стандартную отправку формы
});

Ключевой момент: event.preventDefault() предотвращает перезагрузку страницы и позволяет полностью контролировать процесс отправки данных.

Сбор данных формы

Umbrella JS предоставляет удобный метод serialize() для превращения данных формы в строку, подходящую для передачи через AJAX.

const formData = u(this).serialize();

Метод serialize() обрабатывает все поля формы (input, select, textarea) и формирует строку вида name1=value1&name2=value2.

Если требуется отправлять данные в формате JSON, можно собрать объект вручную:

const formObject = {};
u(this).find('input, select, textarea').each(function() {
    formObject[this.name] = this.value;
});
const jsonData = JSON.stringify(formObject);

Отправка данных через AJAX

Umbrella JS не имеет встроенного полноценного AJAX API, но можно использовать стандартный fetch вместе с методами библиотеки для удобного доступа к данным.

fetch('/submit', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: formData
})
.then(response => response.json())
.then(data => {
    console.log('Ответ сервера:', data);
})
.catch(error => {
    console.error('Ошибка при отправке формы:', error);
});

Для отправки JSON:

fetch('/submit', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: jsonData
})
.then(response => response.json())
.then(data => {
    console.log('Ответ сервера:', data);
})
.catch(error => {
    console.error('Ошибка при отправке формы:', error);
});

Обработка ошибок и пользовательская обратная связь

Очень важно обрабатывать ошибки сервера и уведомлять пользователя о результатах операции. Например, можно динамически выводить сообщения в блок #formMessage:

.then(data => {
    u('#formMessage').text(data.message).addClass('success');
})
.catch(error => {
    u('#formMessage').text('Произошла ошибка при отправке формы').addClass('error');
});

Использование классов success и error позволяет изменять стиль уведомлений через CSS.

Деактивация кнопки отправки

Чтобы предотвратить многократные нажатия на кнопку отправки до завершения AJAX-запроса, можно временно её отключать:

const submitButton = u(this).find('button[type="submit"]');
submitButton.attr('disabled', true);

fetch('/submit', { method: 'POST', body: formData })
    .finally(() => {
        submitButton.removeAttr('disabled');
    });

Поддержка нескольких форм

Umbrella JS позволяет легко работать с множественными формами на странице:

u('form.ajaxForm').each(function() {
    u(this).on('submit', function(event) {
        event.preventDefault();
        const data = u(this).serialize();
        fetch(this.action, { method: 'POST', body: data });
    });
});

Использование метода each() гарантирует, что обработчик будет назначен на каждую форму отдельно.

Валидация данных перед отправкой

Перед отправкой формы рекомендуется проверять поля. Это можно делать как с помощью стандартного HTML5 (required, pattern), так и с помощью Jav * aScript:

u('#myForm').on('submit', function(event) {
    event.preventDefault();

    const email = u(this).find('input[name="email"]').val();
    if (!email.includes('@')) {
        u('#formMessage').text('Введите корректный email').addClass('error');
        return;
    }

    const data = u(this).serialize();
    fetch(this.action, { method: 'POST', body: data });
});

Интеграция с прогресс-баром

Для больших форм или файлов полезно показывать прогресс отправки. Это можно сделать с использованием XMLHttpRequest вместо fetch:

const xhr = new XMLHttpRequest();
xhr.open('POST', this.action);
xhr.upload.onprogr ess = function(event) {
    if (event.lengthComputable) {
        const percent = (event.loaded / event.total) * 100;
        u('#progressBar').css('width', percent + '%');
    }
};
xhr.send(new FormData(this));

Umbrella JS, несмотря на компактность, предоставляет удобные инструменты для управления формами: выбор элементов, сериализация данных, работа с событиями. В сочетании с современными AJAX-инструментами можно создавать интерактивные и отзывчивые формы без лишнего кода.

Оглавление