Ajax на практике.

В прошлой статье, мы разобрали основной механизм работы метода jQuery $.ajax(). Теперь не плохо бы рассмотреть случаи из реальной практики: каким способом и откуда можно получать данные для передачи ajax-запросом.

Получение данных из формы.

Есть несколько способов получить данные из полей формы:

1. Выбирать каждое поле отдельно, получая его значение. Однако, это не очень удобно, когда полей много.
2. Использовать метод serialize()
3. Использовать метод serializeArray()

Остановимся на двух последних и не столько на том, как получать данные (тут всё просто), а на том, как их обрабатывать на стороне сервера. Возьмем, к примеру, такую форму:

HTML (файл index.html)

<form action="handler.php" method="post" id="my_form">
  <label for="fio">Ф.И.О:</label>
    <input type="text" name="fio" id="fio"><br>
  <label for="mail">Email:</label>
    <input type="text" name="mail" id="mail"><br>
  <label for="select">Пол:</label>
    <select name="gender" id="gender">
      <option value="1">Мужской</option>
      <option value="2">Женский</option>
    </select><br>
  <label>Получать письма:<br>
    <input type="radio" name="get_mail" value="1" id="get_mail_0" checked>Да</label><br>
  <label>
    <input type="radio" name="get_mail" value="0" id="get_mail_1">Нет</label><br>
  <input type="submit" id="submit" value="Отправить">
</form>

И напишем такой JS-код

jQuery (файл script.js)

$(function(){
  $('#my_form').on('submit', function(e){
    e.preventDefault();
    var $that = $(this),
        fData = $that.serialize(); // сериализируем данные
        // ИЛИ
        // fData = $that.serializeArray();
    $.ajax({
      url: $that.attr('action'), // путь к обработчику берем из атрибута action
      type: $that.attr('method'), // метод передачи - берем из атрибута method
      data: {form_data: fData},
      dataType: 'json',
      success: function(json){
        // В случае успешного завершения запроса...
        if(json){
          $that.replaceWith(json); // заменим форму данными, полученными в ответе.
        }
      }
    });
  });
});

Теперь напишем обработчик таким образом, чтоб наглядно увидеть разницу между методами serialize() и serializeArray()

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

<?php
if(isset($_POST['form_data'])){
  $req = false; // изначально переменная для "ответа" - false
  parse_str($_POST['form_data'], $form_data); // разбираем строку запроса
  // Приведём полученную информацию в удобочитаемый вид
  ob_start();
  echo 'До обработки: ' . $_POST['form_data'];
  echo 'После обработки:';
  echo '<pre>';
  print_r($form_data);
  echo '</pre>';
  $req = ob_get_contents();
  ob_end_clean();
  echo json_encode($req); // вернем полученное в ответе
  exit;
}

Итак, если мы отправим данные с использованием метода serialize(), то после завершения запроса, вместо формы, мы увидит примерно такую картину:

До обработки: fio=%D0%9F%D1%83%D0%BF%D0%BA%D0%B8%D0%BD+%D0%92.%D0%92.&mail=mail%40piva.net&select=1&get_mail=1
После обработки:
Array (
  [fio] => Пупкин В.В.
  [mail] => mail@piva.net
  [gender] => 1
  [get_mail] => 1
)

Теперь мы видим в каком виде передаются данные (по сути, строкой) и как выглядят они же, после обработки функцией parse_str(): мы получили ассоциативный массив, где ключами являются имена полей (атрибут name), а значениями - соответствующие данные этих полей.

Проделаем то же самое, но уже с использованием метода serializeArray(), только слегка изменим обработчик. Теперь он должен выглядеть таким образом:

<?php
if(isset($_POST['form_data'])){
  $req = false; // изначально переменная для "ответа" - false
  // Приведём полученную информацию в удобочитаемый вид
  ob_start();
  echo '<pre>';
  print_r($_POST['form_data']);
  echo '</pre>';
  $req = ob_get_contents();
  ob_end_clean();
  echo json_encode($req); // вернем полученное в ответе
  exit;
}

В этом случае, мы уже увидим на экране следующее:

Array
(
  [0] => Array 
    (
      [name] => fio
      [value] => Пупкин В.В.
    )
  [1] => Array 
    (
      [name] => mail
      [value] => mail@piva.net
    )
  [2] => Array 
    (
      [name] => gender
      [value] => 1
    )
  [3] => Array 
    (
      [name] => get_mail
      [value] => 1
    )
)

Разница очевидна. Во втором случае, мы получаем многомерный массив данных, с которым можно сразу работать. Какой из способов выбирать - решать вам. Если говорить обо мне, то в большинстве случаев, я пользуюсь первым.

Получение данных из атрибута data-*.

Итак, это был один из наиболее часто используемых способов получения и передачи данных методом AJAX-запроса. Но рассмотрим другой случай, когда формы нет, но нам нужно откуда-то брать данные для дальнейшей их обработки. К примеру, на странице товара, есть кнопка "Добавить в корзину", по нажатию на которую, мы должны получить какую-то минимальную информацию о продукте. Конечно же, можно сделать скрытые поля формы, где эту информацию и складировать, но есть и другой подход, а именно использование собственных настраиваемых атрибутов. Имя этого атрибута, начинается с префикса data- и должен имеет как минимум один прописной символ после дефиса. Например, data-id, data-mydata, data-ajax и т.д. Вот его-то и возьмем на вооружение, тем более, что в jQuery предусмотрен метод для работы с этим атрибутом - .data().
Сделаем кнопку "Добавить в корзину", содержащюю в атрибуте data-* такие данные, как ID товара, его название и цену. Разделим эти данные запятой (можно использовать другой подходящий разделитель):

<button class="add_to_cart" data-product="22,Процессор,300$">Добавить в корзину</button>

И напишем следующий JS-код:

$('.add_to_cart').on('click', function(){ // по клику на кнопку,
  // получаем данные её атрибута data-product
  var prodData = $(this).data('product'); // "22,Процессор,300$"
  // если нужно, то можно эти данные разобрать на клиенте, поместив их в массив
  var prodDataArray = prodData.split(','); // ["22","Процессор","300$"]
  // или сразу одной строкой кода:
  var prodDataArray = $(this).data('product').split(','); // ["22","Процессор","300$"]
});

Таким не сложным способом, без лишних "телодвижений", мы получили о товаре данные, которые можем использовать дальше: передать AJAX-запросом на сервер, записать в cookie или Local Storage и т.д. Конечно же мы не сбрасываем со счетов и обычные методы для получения данных: текстовое содержание элементов, их другие атрибуты и прочее, но с этим, я надеюсь, что сложностей возникнуть не должно ;)

---

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