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

Ajax запрос в jQuery

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

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

<form action="send.php">
 <div class="form-group">
  <label for="name">Name</label>
  <input type="name" name="name" class="form-control" id="name" 
placeholder="Name">
 </div>
 <div class="form-group">
  <label for="email">Email address</label>
  <input type="email" name="email" class="form-control" id="email" 
placeholder="Email">
 </div>
 <button type="submit" class="btn btn-default">Submit</button>
</form>

Ajax запрос в jQuery

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
$(function(){
 $('form').submit(function(e){
  console.log('Отправка формы...');
  e.preventDefault(); // или return false;
 });
});

Ajax запрос в jQuery

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

$(function(){
 $('form').submit(function(e){
  var data = $(this).serialize()
  console.log(data);
  e.preventDefault(); // или return false;
 });
});

Ajax запрос в jQuery

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

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

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

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

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

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

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

$(function(){
 $('form').submit(function(e){
  var data = $(this).serialize()
  $.ajax({
 url: 'send.php',
 type: 'POST',
 data: data,
 success: function(res){
 console.log(res);
 },
 error: function(){
 console.log('Произошла ошибка!');
 }
  });
  e.preventDefault(); // или return false;
 });
});

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

<?php

if(!$_POST){
 die('No Post Variables');
}

echo "Данные получены:\n";
print_r($_POST);
die;

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

Ajax запрос в jQuery

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

Смотреть курс

Метки:

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

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree