Отправить данные без перезагрузки страницы. AJAX-форма без перезагрузки страницы

На этом уроке мы научимся отправлять форму без перезагрузки страницы , используя метод AJAX , библиотеки jQuery . Как вообще происходит классический процесс отправки формы?

Пользователь нажимает на сайте кнопку Отправить , браузер делает запрос на сервер, в ответ сервер отдаёт заново сформированную страницу и отправляет её обратно браузеру, так и происходит перезагрузка страницы.

Что происходит при AJAX технологии? Начало точно такое же, только сервер по другому отвечает - он не формирует новую страницу, а возвращает только ту область страницы, которая запрашивалась. JS скрипт воздействует на элементы точечно, поэтому полностью страница не перезагружается. Чем это хорошо? Меньшее количество запросов к базе данных снижает нагрузку на сервер и соответственно увеличивает скорость работы сайта.

Какие файлы потребуются

Названия файлов произвольные.

  • index.html - файл с формой на HTML
  • mail.php - обработчик, принимающий данные из формы и отправляющий на емайл заказчика
  • send.js - скрипт, отправляющий данные из формы в PHP обработчик, без перезагрузки страницы
Содержимое index.html

Простая форма с двумя полями ввода для имени и телефона, обязательными для заполнения (required) и кнопка отправить. После формы, мы подключили внешнюю библиотеку jQuery и файл со скриптом send.js . В данной форме нет атрибута action , где указывается PHP обработчик и не указаны методы GET / POST . В технологии AJAX , эти методы указываются в JS скрипте. Отсутствие на странице слова action , уменьшает количество спама через вашу форму.





Отправить



PHP обработчик

Обработчик mail.php будет отправлять нашу форму на сервер. Создадим переменные с емайлом получателя (можно через запятую добавлять ещё адреса) и названием сайта.

Создадим переменные имя и телефон, получая их методом POST из формы. Создадим переменную сообщение, которое придёт получателю на почту, внутри которой содержится имя и номер телефона.

Создаём переменную темы сообщения в email и функцию mail c переменными получателя, темы сообщения и самим сообщением.

Как только пользователь заполнит форму и нажмёт на кнопку, заказчик / администратор получит на свой емайл данные из формы о заявке, оставленной пользователем. Так это и работает.

JS скрипт - send.js

Скрипт выполнится, когда загрузится 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-форму без перезагрузки страницы увлекательно. А ещё интереснее "вдыхать жизнь" в страницы, этому научит вас мой видеокурс

Если вы только начали изучать 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

Недавно я столкнулся с вполне, на мой взгляд, распространённой задачей: нужно обеспечить пользователю возможность загрузить на сервер любое число, скажем, картинок с комментарием к каждой из них в рамках одного интерфейса. В моём случае это было: фото товара, его описание и количество. Для наглядности прикладываю скриншот интерфейса:Идея и алгоритм решения Так как описания и фотографии для получения конечного результата можно изменять очень много раз, решено было осуществить следующую схему работы: фотографии загружаются на сервер на одной при клике на фото-иконку, при этом в случае успеха сервер возвращает имя картинки, а при неуспехе - «error». Соответственно, в случае успеха, фото-иконка заменяется на миниатюру загруженного фото, а в скрытое поле формы соответствующей строки сохраняется её имя, а при неуспехе мы получаем фото-иконку и пустое скрытое поле формы соответствующей строки, отвечающее за имя фото. Текстовая же информация при изменении любого поля формы отправляется на сервер вся в формате массив [имяФото, описаниеДетали, количествоШт] - это наиболее универсально: один и тот же метод отвечает за полное обновление списка товаров при их редактировании или удалении. Как известно, AJAX не умеет отправлять файлы, поэтому реализуем процедуру загрузки с помощью обычной формы, в качестве target которой укажем скрытый фрейм, который и будет перезагружаться вместо страницы.

Практическая реализация Итак, в нашем распоряжении HTML, PHP и Javascript. Поехали:

1. Верстаем на странице форму для загрузки фото. Она содержит только один input, который мы спрячем с помощью css: