Технология 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 для отправки аякс-запроса.

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.

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

Всем привет, при разработке веб приложений происходит взаимодействие клиентской части и серверной например в работе с базой данных необходимо добавлять, редактировать или удалять записи. Зачастую все проходит по отлаженной схеме в виде GET или POST запросов. Однако есть небольшие неудобства – среди которых можно выделить основное, при отправке данных PHP скрипт возвращает ответ от сервера и это происходит на другой странице, а если это массовый ввод данных – то становится неудобно вводить данные, отсылать их в базу, получать ответ на новой странице, а затем возвращаться на страницу ввода.
Чтобы ускорить и упростить работу оператору воспользуемся динамическим добавлением данных без перезагрузки страницы с использованием инструментов ajax и jquery, а подгружать информацию будем циклом foreach php. Другими словами мы будем отправлять данные в базу с помощью ajax методов и ждать ответа от PHP о успешном выполнении запроса и отображать результат.
Происходит фоновый обмен данными между браузером и сервером и при этом веб страничка не перезагружается полностью, а лишь обновляются необходимые данные
Чтобы рассмотреть как это работает – давайте обратимся к примерам. В нашем случае создадим небольшое web-приложение для добавления имени и отчества в базу данных.
Итак начнем:
Для начала создадим файл index.php в котором опишем стили, веб формы и механизм взаимодействия с сервером для управления данными.
Раздел HEAD здесь прописываем необходимые библиотеки jquery для обмена данными, bootstrap фрейморк для придания более представительного вида нашему приложению. Также определим некоторые стили:

На следующем этапе опишем внешний вид страницы приложения тэг body

Не забудем еще про создание модального окна добавления или редактирования данных, которое будет появляться при нажатии на кнопку “Добавить запись” и сделаем его скрытым, а вызывать его будем по нажатию кнопки Добавить запись

Ну а дальше за тэгом идет логика отвечающая за отображение информации на стороне клиента, а также отправка и получение результата от сервера.

Обнуляем переменные и создаем модальное окно заново

JQuery код для обработки нажатий на клавиши при добавлении или редактировании данных.

Cледующий блок кода отвечает за обновление данных – при нажатии на кнопку Обновить

При нажатии на кнопку Удалить срабатывает этот код

C файлом index.php покончили, клиентская часть готова, настало время сделать серверную часть которая будет принимать запросы выполнять необходимые действия и отправлять ответ в клиентскую часть приложения.

Итак назовем файл action.php и впоследствии будем к нему обращаться из index.php

Создаем соединение с базой данных

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

Обрабатываем нажатие кнопки обновить информацию следующим кодом

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