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

Question

[Павел]

собственно есть у меня на сайте много форм , они все однотипные отличаются только мелочью. Я использую код для отправки форм вот такой:

$("#form").submit(function () { //Change
        var th = $(this);
        $.ajax({
            type: "POST",
            url: "mail.php", //Change
            data: th.serialize()
        }).done(function () {
            $.fancybox.open({
                src  : '#thx',
                type : 'inline'
            });
            setTimeout(function () {
                th.trigger("reset");
                $.fancybox.close();
            }, 7000);
        });
        return false;
    });

вся загвоздка в том что я постоянно привязываю форму к id , каждой форме свой id и потом плодится 100500 таких вот кусочков кода отличающиеся только id'шником
пробовал поставить через класс но что то я делаю не так или это вообще не возможно , подскажите как быть , спасибо!

Answer 1

[Станислав]

пробовал поставить через класс но что то я делаю не так или это вообще не возможно

Нет, это возможно, и ход мыслей у вас абсолютно верный. Скорее всего, вы ошиблись при написании селекторов в $("#form").submit(...). Если у вас на странице все формы именно те, что вам нужно обрабатывать указанным скриптом, то вам достаточно написать вот так: $("form").submit(...). Если же у вас есть еще какие-то формы, которые нужно обрабатывать иным способом, то вам следует придумать некий класс для обсуждаемых форм, и делать по ним выборку таким образом: $("form.some-class").submit(...).

Comments

[Павел]

form.some-class , спасибо за помощь

Answer 2

[Сергей delphinpro]

$(function () {
    $('[data-toggle="ajax"]').on('submit', function (e) {
        e.preventDefault();
        let $form        = $(this);
        let $formLoading = $('.ajax-form__loading', $form);
        let $button      = $('[type="submit"]', $form);

        let data     = $form.serialize();
        let action   = $form.data('action') || $form.attr('action');
        let method   = $form.attr('method');
        let response = $form.data('response') || 'html';


        console.log('Response type: ', response);

        $button.attr('disabled', true);
        $formLoading.addClass('show');
        $form.trigger('beforeSend');

        $.ajax({
            url     : action,
            type    : method,
            data    : data,
            dataType: response
        }).then(function (data) {
            console.log('success', arguments);
            $formLoading.removeClass('show');
            $button.attr('disabled', false);
            $form.trigger('success', [data]);
        }).fail(function () {
            console.log('error', arguments);
            $formLoading.removeClass('show');
            $button.attr('disabled', false);
            $form.trigger('error');
        });
    });
});

Comments

[Павел]

тут тоже магии много до которой я не дорос) надо целый гайд по такому коду делать))

[Сергей delphinpro]

$(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'); // генерим событие ошибки на форме.
            // тоже опционально, можно прямо здесь писать что нужно сделать при успехе.
        });
    });
});

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

[Павел]

Сергей: спасибо , возьму ваш код на заметку!

Answer 3

[freecoder-ru]

Так это зависит куда передаёте информацию с форм , так как с каждой формы другая инфа и она может посылатся на другой .php (другой путь) ..
Если я понял вас правильно то просто надо просмотреть с каких форм отправляется та же data и куда и на основе этого сделать универсальный код AJAX обработчик который будет обрабатывать несколько форм.

Comments

[Павел]

код php у меня везде один и тот же вот он

<?php

$frm_name  = "Youname";
$recepient = "[e-mail]";
$sitename  = "Название Сайта";
$subject   = "Новая заявка с сайта \"$sitename\"";

$name = trim($_POST["name"]);
$phone = trim($_POST["phone"]);
$email = trim($_POST["email"]);
$radio1 = trim($_POST["radio1"]);
$radio2 = trim($_POST["radio2"]);


if (!empty($name)) {
    $message .= "Имя: $name <br>";
}
if (!empty($phone)) {
    $message .= "Телефон: $phone <br>";
}
if (!empty($email)) {
    $message .= "E-mail: $email <br>";
}
if (!empty($radio1)) {
    $message .= "Выбрана опция1: $radio1 <br>";
}
if (!empty($radio2)) {
    $message .= "Выбрана опция2: $radio2 <br>";
}

mail($recepient, $subject, $message, "From: $frm_name <$email>" . "\r\n" . "Reply-To: $email" . "\r\n" . "X-Mailer: PHP/" . phpversion() . "\r\n" . "Content-type: text/html; charset=\"utf-8\"");

он как раз таки очень универсальным вышел , а вот js приходится плодить , попробую $("form.some-class").submit(...) , отпишусь что вышло

Answer 4

[Антон Антон]

Вот мой велосипед, посылающий данные формы или объекта с нужной структрурой по alax, адаптируйте под себя.

spoiler

$.fn.serializeObject = function ()
{
	var o = {};
	var a = this.serializeArray();
	$.each(a, function () {
		if (o[this.name]) {
			if (!o[this.name].push) {
				o[this.name] = [o[this.name]];
			}
			o[this.name].push(this.value || '');
		} else {
			o[this.name] = this.value || '';
		}
	});
	return o;
};

function sendForm(form, data) {
	return new Promise((fulfill, reject) => {
		if (!data)
			data = $(form).serializeObject();
//		console.log(`${form.method} ${form.action}`);
		var ajaxSettings = {
			method: form.method,
			url: form.action,
			data: JSON.stringify(data),
			//					dataType: form.method === 'get' ? 'jsonp' : 'json',
			dataType: 'json',
			contentType: 'application/json',
			processData: false,
			xhrFields: {
				withCredentials: true
			}
		};
		var ajaxRequest = $.ajax(ajaxSettings);
		ajaxRequest.done((data, textStatus) => {
			console.log(textStatus);
			console.log(JSON.stringify(data, null, 2));
			fulfill(data);
		});
		ajaxRequest.fail((response, textStatus, errorThrown) => {
			console.log(textStatus);
			console.log(errorThrown);
			if (response.status === 401) {
				screenLogin();
			} else if (response.responseText) {
				var data = JSON.parse(response.responseText);
				console.log(JSON.stringify(data, null, 2));
			} else {
				console.log(errorThrown);
			}
			reject(data);
		});
	});
}

использование:

$('#formLogin').on('submit', (event) => {
  sendForm(event.target)
    .then(data => {
////
    }).catch(error => {
/////
    });
  return false;
});

или (для не-форм)

sendForm({method: "POST", action: '/templates/'}, {id: form.filter_id}).then(data => {
/////// обработка
	});

Comments

[Павел]

спасибо но такая магия мне не по плечу , я только начал js учить , а тут даже прочесть не могу , не то что под себя адаптировать :)

[Антон Антон]

mrusklon: если по кусочкам разбирать, то не так страшно. serializeObject немного магический, да. sendForm если частями смотреть - очень простой