Серия статей "Ajax на практике"
- Основы передачи данных
- Получение данных из формы
- Загрузка файлов
- Progress Bar - индикатор процесса загрузки
- Запрос на чистом JavaScript
В прошлой статье, мы разобрали основной механизм работы метода jQuery $.ajax(). Теперь не плохо бы рассмотреть случаи из реальной практики: каким способом и откуда можно получать данные для передачи ajax-запросом.
Получение данных из формы.
Есть несколько способов получить данные из полей формы:
- Выбирать каждое поле отдельно, получая его значение. Однако, это не очень удобно, когда полей много.
- Использовать метод serialize()
- Использовать метод 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.