Ajax передать данные формы

Основы передачи данных.

Серия статей "Ajax на практике"

  • Основы передачи данных
  • Получение данных из формы
  • Загрузка файлов
  • Progress Bar — индикатор процесса загрузки
  • Запрос на чистом JavaScript

Данную статью начал по просьбам новичков, которые только начинают осваивать JS/jQuery и, рано или поздно, сталкиваются с проблемой, как же на практике использовать технологию Ajax. В этой части, я попробую простым языком (пусть не смущает это пользователей продвинутых) объяснить, как применить данную "фишку" с использованием библиотеки jQuery в своих проектах.

Итак. В jQuery есть несколько методов, которые осуществляют запросы к серверной части сайта без перезагрузки страницы. Мы не будем рассматривать каждый метод отдельно "под микроскопом", по той простой причине, что все они являются урезанными/сокращенными функция метода $.ajax(). Для начала, давайте помотрим на код ниже, а дальше разберем его подробней:

HTML (файл index.html)

В этом файле у нас подключена библиотека jQuery, файл с нашим JS-кодом, кнопка ( ), в который мы будем выводить результат работы ajax-запроса

JS/jQuery (файл script.js)

Этот код я сразу прокомментировал, поэтому каких-то особых вопросов возникнуть не должно. Единственное, что хочу отметить для любителей копипаста, то что нужно указывать реальный путь к обработчику в параметре url. И еще один момент — в примере мы передаем данные прописанные вручную (ключ "key" со значением "1"), но в реальных проектах, эти данные подхватываются из каких-либо источников, но об этом поговорим дальше.

Читайте также:  Iphone 6 plus перезагружается на яблоке

PHP-обработчик (файл handler.php)

И наконец, PHP-обработчик, в котором обрабатываются данные запроса и формируется ответ, который возвращается обратно на растерзание нашему JS-коду. Тут все предельно просто. Почему мы преобразовываем данные в JSON-строку — потому, что мы указали в параметре dataType, что именно такие данные нужно ожидать в ответе. А почему именно такие — потому, что это наиболее удобный формат для дальнейшей работы: можно передавать как строку, так и массив данных или же сразу подготовленный HTML-код для вставки на страницу.

Что же будет происходить на каждом этапе:

  1. По нажатию на кнопку, начинает работать JS-код
  2. Перед отправкой, сработает функция в beforeSend. Она выведет в блок "output" сообщение о начале запроса
  3. Если что-то пойдет не так (например, путь к обработчику указан не верно), то сработает функция error и в блок выведется ошибка
  4. Если всё нормально, то запустится функция success и в блоке появится результат нашего запроса
  5. На последнем этапе — выполнится функция complete, которая добавит в блок вывода сообщения об окончании AJAX-запроса

*beforeSend и complete можно использовать, например, для вывода какой-нибудь картинки-прелоадера, чтоб давать пользователю понять о том, что процесс идет. И это далеко не все полезные опции метода $.ajax(), но тот необходимый минимум, который позволит правильно и грамотно функционировать методу.

И еще один полезный метод jQuery, который достоин внимания в рамках этой тема — $.ajaxSetup(). Если в вашем проекте будет множество Ajax-запросов, то этот метод, поможет избежать постоянного перечисления одинаковых установок метода $.ajax(). К примеру, если у вас один файл-обработчик, используете один и тот же метод передачи данных, принимаете данные в одинаковом формате и т.д., то это прописывается один раз в методе $.ajaxSetup() и в дальнейшем все эти установки, будут автоматически применены ко всем запросам.

Читайте также:  Как подключить dvb t2 к старому телевизору

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

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

Полное описание функции AJAX на jquery.com.

GET запрос

Запрос идет на index.php с параметром « text » и значением « Текст » через метод GET.
По сути это то же самое что перейти в браузере по адресу – http://site.com/index.php?text=Текст

В результате запроса index.php вернет строку «Данные приняты – Текст», которая будет выведена в сообщении alert.

Код можно сократить используя функцию $.get

Код файла index.php

GET запросы могут кэшироваться браузером или сервером, чтобы этого избежать нужно добавить в функцию параметр – cache: false .

POST запросы

Или сокращенная версия – функция $.post

Код файла index.php

POST запросы ни когда не кэшироваться.

Отправка формы через AJAX

При отправке формы применяется функция serialize() , подробнее на jquery.com.

Она обходит форму и собирает названия и заполненные пользователем значения полей и возвращает в виде массива – .

Как отправить данные с формы без перезагрузки страницы, да легко с помощью ajax.

Создадим простенькую форму:

Далее нам понадобится подключить jQuery

И делаем непосредственно наш Javascript

Ну и непосредственно (res.php) файл который будет принимать наши

данные и возвращать нам ответ:

Добавим на нашу страницу блок с атрибутом "results" куда будем выводить результат:

url (строка). Страница сервера, к которой будет сделан запрос.
type (строка: GET или POST). Тип запроса к серверу: GET или POS
data (строка). Данные, отправляемые на сервер.
cache (true или false). Включает или выключает кеширование браузером.
async (true или false). По умолчанию true. Включает или выключает асинхронные запросы

Читайте также:  Alias not found что значит

success вызывается, когда запрос завершился успешно. Ему передаются параметры: возвращаемые сервером данные, строка, содержащая код ответа сервера
error вызывается, когда запрос завершился неудачей. Передаются: xmlHttpRequest и строка, указывающая тип ошибки
complete вызывается, когда запрос завершился. Просто завершился, независимо от того, удачей или нет