Давно уже существует технология Ajax но некоторые не понимают как ей пользоваться и в чем ее преимущества. Хочу внести свои пять копеек для новичков.
Зачем же этот Ajax нужен?
Для красивой подгрузки данных из бд, например ;)
Но мы сегодня про это не будем, ведь статья для новичков.
Самый простой сайт - лендинг, визитка - не обходиться без формы для сбора данных. Вот именно здесь эта технология и пригождается -
обычно необходимо сделать так чтоб при отправке формы не открывалось новое окно с благодарностью, а просто появлялось сообщение об успешной/неуспешной отправке данных.
Вот наша самая простая форма для сбора имён с номерами телефонов:
HTML
<div class="form">
<input class="form__input name" id="name" name="name" type="text" placeholder="Ваше имя *" required maxlength="15">
<input class="form__input tel" id="tel" name="tel" type="tel" placeholder="Номер телефона *" required>
<button class="form__button btn" id="btn_submit">Позвоните мне!</button>
</div>
<p class="result"></p>
Я специально не использовал тег FORM, чтоб показать что при пользовании Ajax можно без него.
JS (with JQuery)
$('.btn').click(function () {
// собираем данные с формы
const result = $(".result")
const user_name = $('.name').val()
const user_phone = $('.tel').val()
// отправляем данные
$.ajax({
url: "mail.php", // куда отправляем - php обработчик
type: "post", // метод передачи
data: { // что отправляем
"name": user_name,
"tel": user_phone,
},
error: function () { // функция при ошибке отправки
result.html("Произошла ошибка на сервере данные формы не отправлены! Просим Вас позвонить нам!");
},
beforeSend: function () { // функция во время отправки
result.html("Отправляем данные...");
},
success: function (res) { // функция при успешной отправке
if (res === "Мы получили ваши данные и скоро свяжемся с вами! Спасибо!") {
$(".form").hide(400); // прячем форму чтоб больше не отправляли
}
result.html(res);
}
});
});
Пояснения:
res - это данные полученные от php-обработчика.
Можно и без них, конечно же, но хочется показать возможности, а вам решать как делать. Почти у каждой задачи есть несколько решений.
Если пользоваться тегом FORM то тогда необходимо привязывать функцию отправки к событию submit. И тогда данные для отправки Ajax-ом будем получать с помощью функции serialize().
Как всегда буду благодарен за конструктивные комментарии по делу.
ЗЫ:
1. php-обработчик найдете в моей следующей статье.
2. в JS использовал селекторы по классам так как не знаю как поставить знак решетки в дзене )