Примеры использования JSON-формата на PHP и JavaScript

Что такое JSON

JSON - это текстовый формат записи данных. Он позволяет в текстовом виде представить как отдельное число или строку, так и сложные структуры, например, массивы с данными. Использование этого формата записи удобно тем, что он читабелен и интуитивно понятен, в то же время позволяет сохранять очень сложные структуры данных. Кроме того, он более компактный, чем xml, поэтому на мой взгляд более предпочтителен для обмена данными между веб-браузером и сервером.

Синтаксис JSON на примерах

Формат json обычно записывается в 2-х вариантах:

1. Последовательность значений. Например, последовательность 10, 15 и "test" в формате JSON будут выглядеть так:

[10,15,"test"]

2. Запись в виде пар ключ : значение. Например:

{"ФИО":"Иванов Сергей", "Дата рождения":"09.03.1975"}

Немного более сложный пример:

{
  "ФИО" : "Иванов Сергей",
  "Адрес" : {
    "Город" : "Москва",
    "Улица" : "Пятницкая",
    "Дом" : "35"
  }
}

PHP функции для работы с JSON-форматом

В языке php начиная с версии 5.2. есть всего 4 функции:

• json_decode — Декодирует строку JSON (из строки json-формата получает данные)
• json_encode — Возвращает JSON-представление данных (преобразует данные в json-строку)
• json_last_error_msg — Возвращает строку с сообщением об ошибке последнего вызова json_encode() или json_decode()
• json_last_error — Возвращает последнюю ошибку

В основном по-большей части, используются всего две функции: json_encode и json_decode. Не буду вдаваться в подробности их синтаксиса, подробнее можете посмотреть на php.net. Пример использования:

$arr1 = array(0,1,2);

$json_str = json_encode($arr1);
echo $json_str; // выведет json-строку: [0,1,2]

$arr2 = json_decode($json_str);
echo $arr2[1]; // выведет: 1

Обратите внимание: при кодировании в JSON-формат данных на русском языке, функция json_encode преобразует русские символы в юникод, т.е. заменяет их на \uXXXX и таким образом, json-строка становится не читабельной для человека (но понятной для браузера). Если нужно, чтобы преобразования в юникод не происходило (например, при отладке кода), можно просто использовать опцию JSON_UNESCAPED_UNICODE.

Так же, чтобы при кодировании не добавлялись слэши для экранирования и чтобы строки с числами кодировались как числа, можно использовать JSON_UNESCAPED_SLASHES и JSON_NUMERIC_CHECK. В итоге, чтобы json-строка была читабельной для человека, сделаем, например, так:

$arr = array(
  'fio' => 'Иванов Сергей', 
  'age' => '32', 
  'vk_url' => 'https://vk.com/id11111'
);
echo json_encode($arr, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_NUMERIC_CHECK);

Без использования этих опций строка была бы такой:

{
  "fio" : "\u0418\u0432\u0430\u043d\u043e\u0432 \u0421\u0435\u0440\u0433\u0435\u0439",
  "age" : "32",
  "vk_url":"https:\/\/vk.com\/id11111"
}

а с использованием опций, получим читабельную строку:

{
  "fio" : "Иванов Сергей",
  "age" : 32,
  "vk_url" : "https://vk.com/id11111"
}

Еще один момент: если нужно чтобы при декодировании json-строки функция json_decode возвращала именно массив, просто добавьте второй параметр в функцию равный true.

$json_str = '{ "a":1, "b":2, "c":3 }';

$obj = json_decode($json_str); // получим объект
echo $obj->a; // выведет 1

$arr = json_decode($json_str, true); // получим ассоциативный массив
echo $arr['a']; // выведет 1

На этом рассмотрение php-функций завершу.

JavaScript функции для работы с JSON-форматом

Начнем с того, что JSON-формат, изначально был придуман для языка JavaScript и потом стал просто отдельным текстовым форматом, используемым в разных языках. Видимо, поэтому синтаксис JSON очень похож на синтаксис записи обычных объектов и массивов.

// Пример массива в JavaScript
arr = [0, 1, 2, 3];
alert( arr[1] ); // выведет 1
// Пример объекта в JavaScript
obj = {
  "name": "Вася",       
  "age": 35,
  "isAdmin": false
} 
alert( obj.name ); // выведет "Вася"

Функции JavaScript, используемые для преобразования в JSON-формат и обратно:

• JSON.parse - декодирование JSON-строки (преобразование строки в объекты и/или массивы)
• JSON.stringify - возвращает JSON-представление данных (преобразование объектов и/или массивов в json-строку)

Простой пример декодирования json-строки в массив с цифрами:

str = "[0, 1, 2, 3]";
arr = JSON.parse(str);
alert( arr[1] ); // выведет 1

Пример преобразования (сериализации) объекта в JSON-строку:

obj = {
  "name": "Вася",       
  "age": 35,
  "isAdmin": false
} 
alert( JSON.stringify(obj) ); // выведет {"name":"Вася","age":35,"isAdmin":false}

При сериализации (преобразовании) объекта в JSON-строку, вызывается метод toJSON этого объекта, если он существует. Если метода нет, тогда перечисляются все свойства объекта. Пример преобразования объекта с методом toJSON:

obj = {
  "name": "Вася",       
  "age": 35,
  "isAdmin": false,
  toJSON: function() {
    return this.age;
  }
} 
alert( JSON.stringify(obj) ); // выведет 35

Обе функции JSON.parse и JSON.stringify имеют доп.параметры для уточнения правил преобразований. Не буду останавливаться на них в рамках этой статьи. Если необходимо, о них можно почитать, например, здесь: https://learn.javascript.ru/json.

Примеры практического применения JSON-формата

Собственно, лично я, применяю формат JSON в 2-х основных ситуациях:

1. Передача данных между браузером и сервером с использованием Ajax-запросов.

Например, у нас есть какая-то страница, на которой нужно обновить данные без перезагрузки страницы. Допустим, нужно чтобы с сервера "подгрузилась" информация со списком сотрудников и их данными.

В JavaScript с помощью jQuery делаем простой ajax-запрос к серверу и выводим данные в виде таблицы в браузер:

$.getJSON('get-info.php').success(function(data) { // ajax-запрос, данные с сервера запишутся в переменную data
  htmlstr = '<table>';              
  for (var i=0; i<data.length; i++) {  // цикл по сотрудникам
    htmlstr += '<tr>';
    htmlstr += '<td>' + data[i].fio + '</td>';      // первая колонка - ФИО
    htmlstr += '<td>' + data[i].birthday + '</td>'; // вторая колонка - Дата рождения
    htmlstr += '</tr>';
  }
  htmlstr = '</table>';
  $('div.info').html(htmlstr); // в div с классом info выводим получившуюся таблицу с данными
});

На сервере скрипт get-info.php к которому делается ajax-запрос, может быть, например, таким:

$user_info = array();      // создаем массив с данными 
$user_info[] = array (
  'fio' => 'Иванов Сергей',
  'birthday' => '09.03.1975'
);
$user_info[] = array (
  'fio' => 'Петров Алексей',
  'birthday' => '18.09.1983'
);
echo json_encode($user_info);
exit;

В этом примере JSON-строка, которая была передана с сервера в браузер была такой:

[{"fio":"Иванов Сергей","birthday":"09.03.1975"},{"fio":"Петров Алексей","birthday":"18.09.1983"}]

Я специально не стал показывать строку в виде "дерева", т.к. она передается именно в таком виде. И как вы можете оценить, запись данных в формате JSON получилась очень компактной, а это значит, что передача этих данных от сервера к браузеру будет практически мгновенной.

2. Запись сложных структур данных в базу данных.

Иногда бывают ситуации, когда заводить еще одну таблицу в базе данных не целесообразно, чтобы сохранить различные данные. Допустим, предположим, у зарегистрированного на сайте пользователя есть возможность сделать настройку цвета фона и цвета текста.

Вместо того, чтобы заводить еще одну таблицу ради 2-х настроек, можно просто в таблице со списком пользователей сделать текстовый столбец, в который помещать данные настроек пользователя. Тогда запрос обновления настроек, может например, быть таким:

UPDATE users SET settings = '{"background-color":"#FFFFFF", "text-color":"#000000"}' WHERE user_id = 10

В будущем, получив из таблицы users информацию, скрипт php может легко превратить их обратно в массив с настройками. Например, если переменная $user_info содержит данные, полученные по пользователю из таблицы users, получить массив с настройками очень просто:

$settings = json_decode($user_info['settings'], true);
echo 'Цвет фона = '.$settings['background-color'];
echo 'Цвет текста = '.$settings['text-color'];

В формате JSON, можно так же, например, записать в базу данных какие опции товаров выбрал покупатель.

{"15":["45","47"], "18":"52"} // у опции 15 выбраны значения 45 и 47, а у опции 18 выбрано значение 52

Впринципе, можно даже и всё содержимое корзины записать в формате JSON, например, так:

{
  "user_id" : 10,
  "session_id" : "2c2l3h4ii271aojentejtdcmh3",
  "products":
  [
    {
      "product_id" : 15,
      "options" : {
        "15" : [45, 47],
        "18" : 52
      },
      "quantity" : 1,
      "price" : 1500
    },
    {
      "product_id" : 16,
      "options" : {
        "15" : [47,48],
        "18" : 51
      },
      "quantity" : 2,
      "price" : 1000
    }
  ]
}

В обычном не древовидном виде эта JSON-строка будет такой:

{"user_id":10,"session_id":"2c2l3h4ii271aojentejtdcmh3","products":[{"product_id":15,"options":{"15":[45,47],"18":52},"quantity":1,"price":1500},{"product_id":16,"options":{"15":[47,48],"18":51},"quantity":2,"price":1000}]}

Таким образом, как видно из примеров, в формате JSON можно хранить и передавать практически любую информацию.