Комментарии пользователя Сергей delphinpro

Как можно оптимизировать код ajax отправки формы для многократного использования?

Сергей delphinpro @delphinpro Куратор тега JavaScript

$(function () { // выполнять после построения DOM (страница загружена)

    // обрабатывать будем события отправки всех форм с атрибутом data-toggle="ajax"
    // например
    // <form action="form.php" method="post" data-toggle="ajax">
    $('[data-toggle="ajax"]').on('submit', function (e) {
        e.preventDefault(); // отменяем отправку браузером
        let $form   = $(this); // сохраняем форму в переменную
        let $button = $('[type="submit"]', $form); // находим кнопку сабмит внутри этой формы

        let data     = $form.serialize(); // собираем данные из всех полей
        let action   = $form.data('action') || $form.attr('action'); // получаем URL куда будем отправлять (form.php из action формы)
        let method   = $form.attr('method'); // тут метод отправки GET/POST
        let response = $form.data('response') || 'html'; // тип ожидаемого от сервера ответа, если не задано - простой html

        $button.attr('disabled', true); // дизаблим кнопку сабмит

        // генерим событие "щас будем отправлять форму".
        // это опционально, я просто код дернул из проекта.
        $form.trigger('beforeSend');

        // ну тут вроде знакомый jQuery метод 
        // передаем туда все данные что только что насобирали и отправляется запрос.
        $.ajax({
            url     : action,
            type    : method,
            data    : data,
            dataType: response
        
        }).then(function (data) { // успешно отправлено, получен ответ в data

            $button.attr('disabled', false); // включаем кнопку отправки
            $form.trigger('success', [data]); // генерим событие успеха на форме.
            // тоже опционально, можно прямо здесь писать что нужно сделать при успехе.

        }).fail(function () { // отправка не удалась, ошибка

            $button.attr('disabled', false); // включаем кнопку отправки
            $form.trigger('error'); // генерим событие ошибки на форме.
            // тоже опционально, можно прямо здесь писать что нужно сделать при успехе.
        });
    });
});

Все генерации событий нужны для универсальности. Для всех форм мы можем применять вот этот единый код, но на какую-то особую можем дополнительно повесить события и по-другому реализовать обработку успеха/ошибки.

Войдите на сайт