Отправка данных форм

Zepto.js предоставляет компактный и эффективный способ работы с формами, включая сбор данных и отправку их на сервер. Основной инструмент для этого — метод $.ajax(), который позволяет управлять HTTP-запросами с минимальным синтаксисом.

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

Для отправки данных формы их необходимо сначала собрать. Zepto.js использует метод serialize(), аналогичный jQuery:

var formData = $('#myForm').serialize();

Метод serialize() преобразует все поля формы в строку URL-кодированного запроса, например:

username=ivan&password=1234&remember=true

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

  • serialize() учитывает только поля с атрибутом name.
  • Поля без значения включаются с пустым значением.
  • Флажки и переключатели учитываются только если они выбраны (checked).

Для работы с JSON-данными можно использовать пользовательскую функцию:

function formToJSON(form) {
    var data = {};
    $(form).find('input, select, textarea').each(function() {
        var name = $(this).attr('name');
        if (name) {
            data[name] = $(this).val();
        }
    });
    return data;
}

var jsonData = formToJSON($('#myForm'));

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

Метод $.ajax() позволяет отправлять данные без перезагрузки страницы:

$.ajax({
    url: '/submit',
    type: 'POST',
    data: $('#myForm').serialize(),
    success: function(response) {
        console.log('Ответ сервера:', response);
    },
    error: function(xhr, status, error) {
        console.error('Ошибка запроса:', error);
    }
});

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

  • url — адрес, на который отправляется запрос.
  • type — HTTP-метод (GET, POST и др.).
  • data — данные формы, сериализованные через serialize() или преобразованные в JSON.
  • success — функция, вызываемая при успешном ответе сервера.
  • error — обработка ошибок запроса.

Для JSON-запросов необходимо задать заголовок contentType и преобразовать данные:

$.ajax({
    url: '/submit-json',
    type: 'POST',
    contentType: 'application/json',
    data: JSON.stringify(formToJSON($('#myForm'))),
    success: function(response) {
        console.log('Ответ сервера JSON:', response);
    }
});

Обработка событий формы

Чтобы перехватить стандартное событие отправки формы и выполнить AJAX-запрос, используется метод on:

$('#myForm').on('submit', function(e) {
    e.preventDefault(); // предотвращает обычную отправку
    var formData = $(this).serialize();
    $.ajax({
        url: $(this).attr('action'),
        type: $(this).attr('method'),
        data: formData,
        success: function(response) {
            console.log('Форма успешно отправлена');
        }
    });
});

Важно:

  • e.preventDefault() блокирует стандартное поведение браузера.
  • $(this).attr('action') и $(this).attr('method') позволяют использовать атрибуты формы динамически.
  • Для динамически добавленных форм рекомендуется делегировать событие через $(document).on('submit', '#myForm', function(){}).

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

Zepto не предоставляет встроенной валидации, но можно использовать простые проверки:

$('#myForm').on('submit', function(e) {
    e.preventDefault();
    var username = $('#username').val();
    if (!username) {
        alert('Имя пользователя обязательно');
        return;
    }
    $.ajax({
        url: $(this).attr('action'),
        type: $(this).attr('method'),
        data: $(this).serialize(),
        success: function(response) {
            console.log('Данные отправлены');
        }
    });
});

Особенности валидации:

  • Проверка на пустые поля.
  • Проверка формата email через регулярные выражения.
  • Возможность добавлять кастомные правила для полей.

Асинхронная обработка и обратные вызовы

Метод $.ajax() возвращает объект, совместимый с Promise, что позволяет использовать цепочки done, fail, always:

$.ajax({
    url: '/submit',
    type: 'POST',
    data: $('#myForm').serialize()
})
.done(function(response) {
    console.log('Успех:', response);
})
.fail(function(xhr) {
    console.error('Ошибка:', xhr.status);
})
.always(function() {
    console.log('Запрос завершён');
});

Файлы и FormData

Для отправки файлов используется объект FormData:

var form = document.getElementById('myForm');
var formData = new FormData(form);

$.ajax({
    url: '/upload',
    type: 'POST',
    data: formData,
    processData: false, // предотвращает автоматическое преобразование в строку
    contentType: false, // устанавливает multipart/form-data
    success: function(response) {
        console.log('Файл загружен');
    }
});

Особенности работы с файлами:

  • processData: false запрещает Zepto сериализовать данные.
  • contentType: false позволяет браузеру автоматически установить корректный заголовок.
  • Поддерживаются несколько файлов через input[type="file"][multiple].

Делегирование отправки форм

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

$(document).on('submit', '.ajax-form', function(e) {
    e.preventDefault();
    $.ajax({
        url: $(this).attr('action'),
        type: $(this).attr('method'),
        data: $(this).serialize(),
        success: function(response) {
            console.log('Динамическая форма отправлена');
        }
    });
});

Это гарантирует, что все формы с классом .ajax-form, даже добавленные после загрузки страницы, будут обрабатываться через AJAX.

Краткий обзор методов для работы с формами

  • serialize() — преобразует поля формы в строку запроса.
  • serializeArray() — возвращает массив объектов {name, value}.
  • FormData — позволяет отправлять файлы и бинарные данные.
  • $.ajax() — основной метод для отправки данных на сервер.
  • on('submit', ...) — перехват стандартной отправки формы.
  • preventDefault() — блокировка стандартного поведения.

Эти инструменты в комбинации позволяют строить полноценные формы с асинхронной отправкой, поддержкой JSON, файлов и динамически добавляемых элементов.

Оглавление