Если вы только начали изучать PHP и уже создавали формы для отправки данных GET и POST запросами, то наверняка задумывались: «Как обрабатывать данные и обновлять их без перезагрузки страницы?». В этой статье мы на простейшем примере покажем, как реализовать такую обработку, а поможет нам в этом AJAX.
AJAX (Asynchronous Javascript and XML) это технология, которая позволяет web-приложениям исполнять код Javascript без перезагрузки страницы. Вернее обновляется не вся страница, а только та часть, которая нам требуется, в результате чего значительно возрастает быстродействие интерфейса.
Реализуем отправку данных из раскрывающегося списка, обработку этих данных на сервере, и возвращение обработанных данных обратно клиенту.
Для начала нужно импортировать библиотеку JQuery для работоспособности AJAX. Внутри тега
вашего проекта прописываем:
Категория не выбрана Легковые Грузовые Cпец.техника
AJAX работает с HTML элементами через атрибут id, поэтому не забываем прописать его нашей форме.
Вне формы создадим кнопку для отправки и блок div, в который будем выводить полученный результат:
Отправить
При нажатии на кнопку будет запускаться функция, прописываем ее название в атрибуте onclick. Задаем id для блока.
Ну и теперь перейдем к самому интересному - созданию функции.
Дадим ей название send. С помощью функции serialize преобразуем набор элементов с нашей формы в строку, пригодную для передачи в обработчик. В url пропишем путь к обработчику, который создадим позже. Передадим в data данные из msg. Происходит запрос в обработчик.
Теперь нужно создать обработчик. Имя ему мы уже задали - auto_result.php. Добавим в него следующий код:
Данный обработчик получает данные о категории методом POST, и отправляет номер категории клиенту. Если категория не была выбрана, то отправляется значение «no».
Вернемся к функции send. Внутри нее функция success получает номер категории, отправленный обработчиком. После этого происходит выбор выводимого сообщения на основе полученной категории.
На этом реализация простейшей динамической обработки завершена.
Смотрите все самые крутые примеры по Ajax
Технология AJAX используется для того, чтобы с помощью javascript отправлять «фоновые» http-запросы, что позволяет не перезагружать страницу, как это происходит при обычной отправке форм.
Реализация AJAX довольно сложна с технической точки зрения. На самом деле происходит работа API XMLHttpRequest , который и выполняет всю работу. Чтобы упростить код, используются функции-«обертки», которые освобождают нас от сложного программирования XMLHttpRequest. В jQuery для этого используются функци ajax , а также её «модификация» post . При этом, если jQuery не нужна, то в Сети можно найти другие библиотеки, реализующие функционал AJAX, например Selector (которая вообще выступает как легковесная замена jQuery).
Не зависимо от используемой библиотеки, основные принципы отправки даных с помощью Аякса будут едиными. Я буду всё показывать на примере jQuery. В конце статьи вы найдете ссылку на zip-архив со всеми примерами.
Что можно отправлять через AJAXМногие думают, что отправке подлежит только форма. Но на самом деле, отправлять можно любые данные. По большому счёту форма как таковая даже не нужна, можно разместить поля ввода (input, textarea и т.п.) в любых местах страницы: перед отправкой просто сформировать из них данные.
На практике стараются использовать именно форму, поскольку это значительно упрощает формирование данных: перед отправкой они просто кодируются (серилизуются) и в таком виде отправляются на сервер.
Общая схема работыПочти всегда это происходит так:
- На html-странице создается форма с нужными полями.
- Перед отправкой, данные формы серилизуются и данные уходят к php-обработчику на сервере.
- Обработчик, выполнив свою работу, возвращает ответ. Это может быть какие-то данные или готовый html-код.
- Этот ответ размещается в заданном блоке на странице.
Дополнительно, при получении ответа, часто скрывают форму, чтобы исключить её повторную отправку.
Начальный кодВначале сформируем каркас HTML. Я использую UniCSS с готовыми CSS-классами. Также подключаю jQuery в секцию HEAD.
Отправка формы на AJAX ... тут будет наш код...
Теперь создадим простую форму и блок ответа.
Имя: Телефон: Отправить
Первые особенностиВ первую очередь обратите внимание, что форма не имеет привычных атрибутов method и action . Формально никто не мешает их указать, но в реальности они будут использоваться только, если будет обычная, а не аякс-отправка. При аякс-отправке нам нужны будут лишь данные формы, а метод и адрес отправки задаются уже в js-коде. Из-за этого мы используем только атрибут id , по которому и сможем идентифицировать форму.
Кнопка имеет тип submit . На самом деле это не обязательно, поскольку главное это просто как-то отреагировать на нажатие кнопки, а это может быть не только submit, но и click. Тип submit удобен тем, что кнопка располагается внутри формы, а значит можно будет перехватить её отправку без дополнительной идентификации.
Но, если кнопку разместить вне формы (если стоит такая задача), то submit сработает не совсем корректно. Особенно если на странице несколько форм, возникнет неопределенность. В этом случае тип кнопки определяют как button (то есть она ничего не делает), и при этом присваивают ей идентификатор id. Например так:
Отправить Имя: Телефон:
Блок #my_message служит для вывода ответа.
Если используется форма, то лучше всё-таки использовать именно submit, поскольку отправка формы может происходить и без нажатия на кнопку: Enter на любом текстовом input-поле. Это типовое поведение браузеров. Первый вариант (submit)При отправке формы при нажатии на submit-кнопку формы, возникает одноименное событие, которое мы и перехватываем. На jQuery это будет выглядеть так:
$("#my_form").submit(function(){ alert("Нажата submit-кнопка"); return false; });
Чтобы заблокировать отправку и перезагрузку страницы, функция возвращает false . Саму же обработку мы разместим вместо alert() , но перед этим разберемся что предлагает jQuery для отправки аякс-запроса.
На этом уроке мы научимся отправлять форму без перезагрузки страницы , используя метод 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-форму без перезагрузки страницы увлекательно. А ещё интереснее "вдыхать жизнь" в страницы, этому научит вас мой видеокурс
Недавно я столкнулся с вполне, на мой взгляд, распространённой задачей: нужно обеспечить пользователю возможность загрузить на сервер любое число, скажем, картинок с комментарием к каждой из них в рамках одного интерфейса. В моём случае это было: фото товара, его описание и количество. Для наглядности прикладываю скриншот интерфейса:Идея и алгоритм решения Так как описания и фотографии для получения конечного результата можно изменять очень много раз, решено было осуществить следующую схему работы: фотографии загружаются на сервер на одной при клике на фото-иконку, при этом в случае успеха сервер возвращает имя картинки, а при неуспехе - «error». Соответственно, в случае успеха, фото-иконка заменяется на миниатюру загруженного фото, а в скрытое поле формы соответствующей строки сохраняется её имя, а при неуспехе мы получаем фото-иконку и пустое скрытое поле формы соответствующей строки, отвечающее за имя фото. Текстовая же информация при изменении любого поля формы отправляется на сервер вся в формате массив [имяФото, описаниеДетали, количествоШт] - это наиболее универсально: один и тот же метод отвечает за полное обновление списка товаров при их редактировании или удалении. Как известно, AJAX не умеет отправлять файлы, поэтому реализуем процедуру загрузки с помощью обычной формы, в качестве target которой укажем скрытый фрейм, который и будет перезагружаться вместо страницы.
1. Верстаем на странице форму для загрузки фото. Она содержит только один input, который мы спрячем с помощью css: