2 years ago | 76.1K
Что такое AJAXПри разработке сайтов бывает, что у нас возникает необходимость отправить данные html-формы без перезагрузки страницы в фоновом режиме (с использованием AJAX). В данной статье мы рассмотрим этот вопрос и покажем на примере как реализовать нашу задачу с помощью языков jquery и php. Мы получим скрипт, при выполнении которого, сервер отправляет, а клиент получает данные в формате JSON.
Технология Ajax стала популярной и часто применяется при создании сайтов в WEB 2.0. Многие уже успешные или начинающие web-сайты стремятся создать удобство для своих пользователей, что немаловажно в условиях конкуренции и огромного количества интернет-ресурсов. Кроме того, Ajax-технология помогает увеличить быстродействие вашего сайта. Это происходит благодаря тому, что пользователь не перегружает страницу целиком, когда необходимо обновить только некоторые элементы/части вашего сайта.
Разберемся как без перезагрузки страницы выполнить отправку данных формы при помощи AjaxЗдесь мы создадим демо-проект, который будет включать в себя 3 файла:
index.php - это главная страница, на которой размещена сама форма
ajax.js - это файл javascript, в котором содержится алгоритм ajax для обработки формы
action_ajax_form.php - это серверная часть, которая отвечает за обработку полученных от формы данных и возвращает клиенту ответ в формате JSON
Создайте первый файл под названием index.php с таким содержимым:
Телефон: "+result.phonenumber); }, error: function(response) { // Данные не отправлены $("#result_form").html("Ошибка. Данные не отправлены."); } }); }
В файле ajax.js
есть два метода: $("#btn").click и sendAjaxForm. Первый метод - это слушатель событий кнопки. То есть, когда мы нажимаем на кнопку "Отправить", слушатель срабатывает и вызывает метод sendAjaxForm.
В метод sendAjaxForm(result_form, ajax_form, url) передаются поля: result_form - это div в который будут рендерится данные, ajax_form - это id формы отправки сообщения и url - это местоположение файла action_ajax_form.php
который отвечает за серверную часть (обработка формы).
Создадим последний файл - action_ajax_form.php
action_ajax_form.php - это обработчик формы на стороне сервера. Этот файл отвечает за backend часть нашего мини-приложения. Для примера, мы делаем проверку: Если существуют переменные в POST запросе name и phonenumber, тогда мы формируем массив $result для JSON ответа от сервера. Затем, массив $result мы переводим в JSON объект, чтобы клиент ajax.js смог корректно получить данные в формате JSON.
На этом уроке мы научимся отправлять форму без перезагрузки страницы , используя метод AJAX , библиотеки jQuery . Как вообще происходит классический процесс отправки формы?
Пользователь нажимает на сайте кнопку Отправить , браузер делает запрос на сервер, в ответ сервер отдаёт заново сформированную страницу и отправляет её обратно браузеру, так и происходит перезагрузка страницы.
Что происходит при AJAX технологии? Начало точно такое же, только сервер по другому отвечает - он не формирует новую страницу, а возвращает только ту область страницы, которая запрашивалась. JS скрипт воздействует на элементы точечно, поэтому полностью страница не перезагружается. Чем это хорошо? Меньшее количество запросов к базе данных снижает нагрузку на сервер и соответственно увеличивает скорость работы сайта.
Какие файлы потребуютсяНазвания файлов произвольные.
- index.html - файл с формой на HTML
- mail.php - обработчик, принимающий данные из формы и отправляющий на емайл заказчика
- send.js - скрипт, отправляющий данные из формы в PHP обработчик, без перезагрузки страницы
Простая форма с двумя полями ввода для имени и телефона, обязательными для заполнения (required) и кнопка отправить. После формы, мы подключили внешнюю библиотеку jQuery и файл со скриптом send.js . В данной форме нет атрибута action , где указывается PHP обработчик и не указаны методы GET / POST . В технологии AJAX , эти методы указываются в JS скрипте. Отсутствие на странице слова action , уменьшает количество спама через вашу форму.
Отправить
Обработчик mail.php будет отправлять нашу форму на сервер. Создадим переменные с емайлом получателя (можно через запятую добавлять ещё адреса) и названием сайта.
Создадим переменные имя и телефон, получая их методом POST из формы. Создадим переменную сообщение, которое придёт получателю на почту, внутри которой содержится имя и номер телефона.
Создаём переменную темы сообщения в email и функцию mail c переменными получателя, темы сообщения и самим сообщением.
Как только пользователь заполнит форму и нажмёт на кнопку, заказчик / администратор получит на свой емайл данные из формы о заявке, оставленной пользователем. Так это и работает.
Скрипт выполнится, когда загрузится DOM дерево.
$(document).ready(function() {
Проверка на заполненность полей, форма не отправиться, если хотя бы одно поле останется пустым. Атрибут HTML5 - required , поддерживается не всеми браузерами.
$("#form").submit(function() {
Отвечает за отправку данных в PHP обработчик через метод AJAX . Собираем все данные из нашей формы и при помощи функции serialize преобразуем их в строку для отправки POST методом на mail.php .
Метод done подтверждает успешность выполненных действий.
}).done(function() {
$(this).find("input").val("");
После отправки данных на mail.php , пользователь видит окно с подтверждением, что заявка получена. Функция trigger позволяет закрыть окно, нажав на кнопку OK .
Alert("Ваша заявка принята! Спасибо.");
$("#form").trigger("reset");
});
return false;
});
});
Пользователь заполняет форму, нажимает кнопочку отправить и моментально, без перезагрузки страницы , выскакивает окно с надписью, что ваша заявка принята. Это и есть AJAX-метод .
Создавать AJAX-форму без перезагрузки страницы увлекательно. А ещё интереснее "вдыхать жизнь" в страницы, этому научит вас мой видеокурс
Всем — привет. Сегодня решил взяться за переработку статьи об , которая открывалась в модальном окне. Статья достаточно популярна, но имела некоторые проблемы. Дело в том, что после отправки данных, выводилось сообщение об успешной отправке и не позволяло больше отправлять письма до перезагрузки страницы. Многие из вас спрашивали, как сделать так, чтобы сообщение не заменяло форму и позволяло повторно отправлять письма. В этой статье мы это исправим и не только.
Еще, у прошлой статьи был, наверное, недостаток в том, что сложно было подключить несколько форм, а именно, нужно было дублировать скрипт, обрабатывающий форму, что не очень красиво. В этой статье поправим и этот момент. Кроме того, форма будет работать и без модального окна.
Ах да, приведу в порядок айдишники и классы, чтобы легче понималось что и зачем. Изменю дизайн формы, так интереснее. В одной из следующих статей, возможно, подключим к этой форме reCapthсa от Google, и настроем цель «Событие», при успешной отправке, так что готовится целый цикл статей.
Как сделать форму обратной связи в модальном окнеДавайте приступим. Так как модальное окно будет вызываться при помощи jQuery плагина Remodal , то перед закрывающимся тегом подключим сам jQuery и плагин Remodal. Ниже добавим скрипт, который будет отвечать за отправку формы без перезагрузки страницы. Выглядит это следующим образом:
Обратите внимание на путь к файлам. Я решил поместить практически все файлы в папку modalform, чтобы легче было подключать к проекту.
Прежде чем перейти к разметке формы, подключим css файлы модального окна. Я делаю это между тегами head:
Итак, теперь перейдем к разметке самой формы и кнопки вызывающей ее. Начнем с кнопки.
Тут — все просто. Обычная ссылка с произвольным классом. Data-remodal-target используется для того, чтобы вызвать модальное окно, аналогично, если бы использовался href со ссылкой на id. Но зачем нам этот мусор в адресной строке. В свою очередь модальное окно с формой выглядит следующим образом:
Закажите обратный звонок и наш консультант свяжется с вами
Введите ваше имя Введите ваш телефонсайт
Хоть кода, на первый взгляд, достаточно много, на самом деле все не так сложно. Вся форма обернута в div c классом remodal. У него есть data-remodal-id с таким же параметром как у кнопки. То есть firstForm. Именно благодаря им, при клике на кнопку открывается нужное окно, в случае, если на странице их несколько.
Data-remodal-options — один из способов задать или отключить некоторые возможности скрипта для модального окна. Подробнее можно почитать на официальном из сайте. Ссылку уже давал выше. В моем случае. Я отключил появление якоря в адресной строке и запретил закрытие окно после нажатия кнопки «отправить».
Внутри сама форма с fieldset(ами). Здесь важно обратить внимание, на параграф с классом «msgs». Именно сюда будет выводиться сообщение об успешной отправке или ошибке. Раньше сообщение выводилось прямо внутри формы, заменяя весь контент внутри.
Еще один момент. Скрытое поле c классом formInfo. Оно нужно для того, чтобы отличать заявки и понимать какую именно форму заполнил пользователь, в случае, если их несколько разных. Просто заполняем нужным текстом значение value.
В конце статьи, я покажу как сделать так, чтобы вызывать окно из разных мест на сайте и понимать, на какую именно кнопку нажал пользователь.
Теперь давайте посмотрим на скрипт, который поможет нам отправить форму без перезагрузки страницы. Я назвал его form.js:
$(document).ready(function () { $("form").submit(function () { // Получение ID формы var formID = $(this).attr("id"); // Добавление решётки к имени ID var formNm = $("#" + formID); var message = $(formNm).find(".msgs"); // Ищет класс.msgs в текущей форме и записываем в переменную var formTitle = $(formNm).find(".formTitle"); // Ищет класс.formtitle в текущей форме и записываем в переменную $.ajax({ type: "POST", url: "modalform/mail.php", data: formNm.serialize(), success: function (data) { // Вывод сообщения об успешной отправке message.html(data); formTitle.css("display","none"); setTimeout(function(){ //$(formNm).css("display","block"); $(".formTitle").css("display","block"); $(".msgs").html(""); $("input").not(":input, :input").val(""); }, 3000); }, error: function (jqXHR, text, error) { // Вывод сообщения об ошибке отправки message.html(error); formTitle.css("display","none"); // $(formNm).css("display","none"); setTimeout(function(){ //$(formNm).css("display","block"); $(".formTitle").css("display","block"); $(".msgs").html(""); $("input").not(":input, :input").val(""); }, 3000); } }); return false; }); //для стилей формы var $input = $(".form-fieldset > input"); $input.blur(function (e) { $(this).toggleClass("filled", !!$(this).val()); }); });
Давайте немного поясню, что тут происходит. Мы вызываем функцию, когда произошло событие submit у формы (нажали на отправку). Затем получаем id формы и сохраняем в переменную formNm. Теперь, id нашей формы в ней. В прошлой статье именно сюда выводилось сообщение. И именно об этом моменте я так часто писал в комментариях. Нужно просто указать другое место для вывода. В нашем случае мы все сообщения будем выводить в заранее подготовленное место. Это тег «p» с классом «msgs».
В скрипте, говорим, что на время показа сообщения об успешной или не успешной отправке, скроем заголовок. А через 3 секунды вернем все на место и отчистим поля формы вместе с сообщением.
Файл, который отправит полученные данные — mail.php. Вот его код:
