Ajax запрос в jQuery. Часть 1

Ajax запрос в jQuery

От автора: приветствую вас, друзья. В этой статье мы начнем работать с Ajax запросами в jQuery. Библиотека jQuery предлагает несколько методов для работы с асинхронными запросами, используя которые мы можем обмениваться информацией с сервером без перезагрузки страницы, т.е. асинхронно. Сегодня мы познакомимся с методом ajax в jQuery.

Итак, в данной статье мы рассмотрим простейший вариант работы с методом ajax и некоторыми из его параметров. Для работы нам потребуется прежде всего форма:

Ajax запрос в jQuery

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

Коль мы хотим отправить данные из формы без перезагрузки страницы, нам нужно отменить дефолтное поведение формы. Как это сделать, мы уже знаем, для этого, к примеру, можно использовать метод preventDefault. Также нам необходимо событие отправки формы, и с этим мы также уже знакомы — метод submit как раз отвечает за такое событие. Итого, запретить отправку формы можно следующим кодом:

Ajax запрос в jQuery

Отлично! Осталось собрать данные из полей формы, которые мы хотим отправить на сервер методом ajax. Здесь нам пригодится метод serialize, который из полей формы создаст строку параметров запроса URL. Давайте попробуем:

Ajax запрос в jQuery

Отлично, все работает. Как видим, имя параметра совпадает с именем конкретного поля формы, а значение параметра — то, что мы набрали в поле. Пришло время использовать запрос ajax. Используя одноименный метод ajax необходимо передать в виде объекта следующие необходимые параметры (настройки запроса):

url — адрес, на который будет отправляться запрос;

type — метод передачи данных (по умолчанию GET);

data — отправляемые данные;

success — функция, которая вызывается после удачного запроса к серверу и получения ответа;

error — функция, которая вызывается в случае неудачного запроса к серверу.

На самом деле параметров куда больше, но перечисленных выше вам будет достаточно в большинстве случаев. Попробуем теперь сформировать запрос:

Теперь набросаем простейший обработчик, который примет данные и вернет какой либо ответ:

Пробуем отправить форму и получить ответ:

Ajax запрос в jQuery

Супер! Данные успешно отправлены и ответ получен. Код ответа — 200, т.е. все ОК. В ответе мы получили распечатку массива POST. Обратите внимание на несколько моментов, это важно! Ответом считается только вывод на экран (функциями echo, print_r и т.п.). Т.е. если на сервере мы вызовем, к примеру, функцию, которая вернет некий результат, но ничего не выведет на экран, в этом случае мы получим пустой ответ. Это первый момент. Момент второй: после ответа я остановил дальнейшее выполнение скрипта функцией die. В данном случае это не принципиально, поскольку код скрипта итак завершился выводом. Однако в реальных проектах после обработчика часто идет другой код и для того, чтобы он не выполнялся, сразу после ответа не забывайте останавливать скрипт.

На этом мы, пожалуй, остановимся. Исходники к статье вы можете скачать по ссылке. Больше о jQuerу вы можете узнать из наших уроков или курса. Удачи!

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии (2)