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.

Incode Pro logo

32 комментария

Страница 2 из 2  
Гость 29.10.2014 11:12
Спасибо. Просто, доступно и ничего лишнего ))
Гость 31.07.2015 18:53
НЕ РАБОТАЕТ ВАШ КОД!!!!!!
Incode 31.07.2015 19:11
НЕ РАБОТАЕТ ВАШ КОД!!!!!!
Код, если мы говорим о примере, который я даю на скачивание, абсолютно рабочий. Это уже что-то вы не так сделали у себя. А вот что точно не работает, так это ваша кнопка Caps Lock :)
Andrew 21.08.2015 09:30
Спасибо!
А как передать данные, что бы получить массив следующего вида:
Array (
  [fio] => Пупкин В.В.
  [mail] => mail@piva.net
  [gender] => 1
  [get_mail] => 1
  [goods] => Array 
    (
      [0] => Array 
         (
            [id] => 9552
            [quantity] => 3
         )
      [1] => Array 
         (
            [id] => 1123
            [quantity] => 1
         )
    )
)
Incode 24.08.2015 06:49
А как передать данные, что бы получить массив следующего вида
Создать объект с вашими данными и передать его на сервер.
Incode 25.08.2015 23:17
@Andrew, не было времени, но если не успели разобраться, то объект должен быть таким:
var obj = {
    fio: 'Пупкин В.В.',
    mail: 'mail@piva.net',
    gender: 1,
    get_mail: 1,
    goods: [{
        id: 9552,
        quantity: 3
    }, {
        id: 1123,
        quantity: 1
    }]
};
И такой объект или переменную, которой объект присвоен (obj в моём случае) подставляем в параметр data:
$.ajax({
    url: /* ваш url */,
    type: /* ваш метод */, 
    data: obj, // вот сюда
    dataType: 'json',
    success: function (json) {
        // какие-то действия
    }
});

P.S. Пожалуйста, форматируйте код, выделив его и нажав кнопку </>
client500 28.10.2015 09:51
У меня ajax, форма и обработчик на одном файле. нужно ли в таком случае указывать путь к обработчику если да то какой.
Страница 2 из 2  
Ваш комментарий:
X