JSON формат: создание данных, использование с PHP и JS


Что такое JSON и на что он способен? В этой статье вы узнаете, как использовать JSON для легкой работы с данными. Так же мы рассмотрим, как работать с JSON используя при этом PHP и JavaScript.

jsonформат данных
 

Если вы разрабатывали вебсайты или веб-приложения в целом, вероятней всего вы слышали о JSON, по крайней мере, мимолетом. Но, что конкретно значит JSON? Что может делать этот формат данных и как им пользоваться?

В этой статье мы узнаете основы работы с json форматом. Мы будем следовать следующим темам:

  • Что такое JSON формат?
  • Для каких целей используется JSON?
  • Как создавать JSON строки?
  • Простой пример JSON данных
  • Сравнение JSON с XML
  • Как работать с JSON через PHP и JS?

Давайте начнем!

Что такое JSON формат?

JSON – это простой, основанный на тексте, способ сохранять и передавать структурированные данные. С помощью простого синтаксиса вы можете легко сохранять как простые цифры и строки, так и массивы, объекты, используя при этом не что иное как текст. Так же можно связывать объекты и массивы, что позволяет создавать сложные структуры данных.

После создания JSON строки, ее легко можно пересылать в любое приложение или компьютер, так как это всего лишь текст.

JSON имеет много преимуществ:

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

Буквально, аббревиатура JSON означает – JavaScript Object Notation. Как описано ранее, этот формат основан на создании объектов, что-то подобное к ассоциативным массивам в других языках программирования.

Для каких целей используется JSON?

Более всего, json используется для обмена данными между javascript и серверной стороной (php). Другими словами, для технологии ajax. Это очень удобно, когда вы передаете несколько переменных или целые массивы данных.

Как это выглядит на примере:

  1. Пользователь кликает по превьюшке картинки
  2. JavaScript обрабатывает это событие и посылает ajax запрос к PHP скрипту, передавая ID картинки.
  3. На сервере, php получает описание картинки, имя картинки, адрес к большому изображению и другую информацию из базы данных. Получив, преобразовывает в JSON формат и отправляет обратно на страницу пользователя.
  4. JavaScript получает ответ в виде JSON, обрабатывает данные, формирует html код и выводит увеличенное изображение с описанием и другой информацией.

Так происходит увеличение картинки, без перезагрузки страницы в браузере. Это очень удобно, когда нам необходимо получить частичные данные, или передать небольшой объем информации на сервер.

Всеми любимый jQuery, имеет функции getJSON() и parseJSON(), которые помогают работать с форматом через ajax запросы.

Как создавать JSON строки?

создание json строк
 

Ниже предоставлены основные правила создания JSON строк:

  • JSON строка содержит как массив значений, так и объект (ассоциативный массив с парами имя/значение).
  • Массив должен быть обвернут в квадратные скобки, [ и ], может содержать список значений, которые отделяются через кому.
  • Объекты обворачиваются с помощью фигурных дужек, { и }, также содержат разделенные комой пары имя/значение.
  • Пары имя/значение состоят из имя поля (в двойных кавычках), после чего следует двоиточие ( : ) , после значение данного поля.
  • Значения в массиве или объекте могут быть:
    • Числовые (целые или дробные с точкой)
    • Строковые (обвернутые в двойные кавычки)
    • Логические (true или false)
    • Другие массивы (обвернутые в квадратные скобки [ и ])
    • Другие объекты (обвернутые в фигурные дужки { и })
    • Нулевое значение (null)

Важно! Если вы используете двойные кавычки в значениях, экранируйте их с помощью обратного слеша: \". Также можно использовать hex закодированные символы, так как вы это делаете в других программных языках.

Простой пример JSON данных

Следующий пример показывает, как можно сохранять данные в «корзине» интернет магазина с помощью JSON формата:

{
  "orderID": 12345,
  "shopperName": "John Smith",
  "shopperEmail": "johnsmith@example.com",
  "contents": [
    {
      "productID": 34,
      "productName": "SuperWidget",
      "quantity": 1
    },
    {
      "productID": 56,
      "productName": "WonderWidget",
      "quantity": 3
    }
  ],
  "orderCompleted": true
}

Давайте разберем эти данные по частям:

  1. В начале и конце мы использует фигурные дужки { и }, которые дают понять, что это объект.
  2. Внутри объекта мы имеем несколько пар имя/значение:
  3. "orderID": 12345 – поле с именем orderId и значение 12345
  4. "shopperName": "John Smith" – поле с именем shopperName и значение John Smith
  5. "shopperEmail": "johnsmith@example.com" – подобно, как и в предыдущем поле, здесь храниться email покупателя.
  6. "contents": [ ... ] – поле с именем content, значение которого массив.
  7. "orderCompleted": true – поле с именем orderCompleted, значение которого true
  8. Внутри массива contents, мы имеем два объекта, которые отображают содержимое корзины. Каждый объект продукта имеет три свойства: productID, productName, quantity.

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

<script type="text/javascript">
var cart = {
  "orderID": 12345,
  "shopperName": "John Smith",
  "shopperEmail": "johnsmith@example.com",
  "contents": [
    {
      "productID": 34,
      "productName": "SuperWidget",
      "quantity": 1
    },
    {
      "productID": 56,
      "productName": "WonderWidget",
      "quantity": 3
    }
  ],
  "orderCompleted": true
};
</script>

Сравнение JSON с XML

В большинстве случаев, вы будете думать о JSON как альтернативе XML формату – по крайней мере в рамках веб приложений. Концепция Ajax, в оригинале использует XML для обмена данными между сервером и браузером, но в последние годы JSON стал более популярным для передачи ajax данных.

Хотя XML это испытанная и хорошо тестированная технология которой пользуются множество приложений, преимущества JSON формата в том, что он более компактный и более прост в написании и чтении.

Вот вышеописанный JSON пример, только переписанный в XML формате:

<object>
  <property>
    <key>orderID</key>
    <number>12345</number>
  </property>
  <property>
    <key>shopperName</key>
    <string>John Smith</string>
  </property>
  <property>
    <key>shopperEmail</key>
    <string>johnsmith@example.com</string>
  </property>
  <property>
    <key>contents</key>
    <array>
      <object>
        <property>
          <key>productID</key>
          <number>34</number>
        </property>
        <property>
          <key>productName</key>
          <string>SuperWidget</string>
        </property>
        <property>
          <key>quantity</key>
          <number>1</number>
        </property>        
      </object>
      <object>
        <property>
          <key>productID</key>
          <number>56</number>
        </property>
        <property>
          <key>productName</key>
          <string>WonderWidget</string>
        </property>
        <property>
          <key>quantity</key>
          <number>3</number>
        </property> 
      </object>
    </array>
  </property>
  <property>
    <key>orderCompleted</key>
    <boolean>true</boolean>
  </property>  
</object>

Как видите в несколько раз длиннее нежели JSON. По факту, этот пример длинной 1128 символов, в то время, как JSON версия всего лишь 323 символа. Также XML версию сложнее читать.

Естественно, нельзя судить только по одному примеру, но даже небольшие объемы информации занимают меньше места в JSON формате, нежели в XML.

Как работать с JSON через PHP и JS?

Вот мы и подошли к самому интересному – практической стороне JSON формата. Сначала отдадим дань JavaScript’у, после посмотрим, как можно манипулировать с JSON через PHP.

Создание и чтение JSON формата с помощью JavaScript

json и js
 

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

К счастью, многие языки программирования предоставляют инструменты для работы с JSON строками. Основная идея которых:

Создание JSON строк, вы начинаете с переменных содержащих некие значения, после пропускаете их через функцию, превращающую данные в JSON строку.

Чтение JSON строк, вы начинаете с JSON строки содержащей определенные данные, пропускаете строку через функцию, которая создает переменные содержащие данные.

Давайте посмотрим, как это делается в JavaScript.

Создаем JSON строку из JavaScript переменной

JavaScript имеет встроенный метод, JSON.stringify(), который принимает переменную javascript и возвращает json строку репрезентируя содержимое переменной. Для примера, воспользуемся ранее созданным объектом, сконвертируем его в JSON строку.

<script type="text/javascript">

var cart = {
  "orderID": 12345,
  "shopperName": "John Smith",
  "shopperEmail": "johnsmith@example.com",
  "contents": [
    {
      "productID": 34,
      "productName": "SuperWidget",
      "quantity": 1
    },
    {
      "productID": 56,
      "productName": "WonderWidget",
      "quantity": 3
    }
  ],
  "orderCompleted": true
};

alert ( JSON.stringify( cart ) ); 

</script>

Вот что выведется на экран:

{"orderID":12345,"shopperName":"John Smith","shopperEmail":"johnsmith@example.com",
"contents":[{"productID":34,"productName":"SuperWidget","quantity":1},
{"productID":56,"productName":"WonderWidget","quantity":3}],
"orderCompleted":true}

Заметьте, что JSON.stringify() выводит JSON строки без пробелов. Сложно читать, но так более компактно, что важно при пересылке данных.

Создаем JavaScript переменную из JSON строки

Существует несколько способов парсинга JSON строк, наиболее приемлем и безопасный используя JSON.parse() метод. Он принимает JSON строку и возвращает JavaScript объект или массив содержащий данные JSON. Вот пример:

<script type="text/javascript">

var jsonString = '                          \
{                                           \
  "orderID": 12345,                         \
  "shopperName": "John Smith",              \
  "shopperEmail": "johnsmith@example.com",  \
  "contents": [                             \
    {                                       \
      "productID": 34,                      \
      "productName": "SuperWidget",         \
      "quantity": 1                         \
    },                                      \
    {                                       \
      "productID": 56,                      \
      "productName": "WonderWidget",        \
      "quantity": 3                         \
    }                                       \
  ],                                        \
  "orderCompleted": true                    \
}                                           \
';

var cart = JSON.parse ( jsonString );

alert ( cart.shopperEmail );
alert ( cart.contents[1].productName );

</script>

Здесь мы создавали переменную, jsonString, которая содержит JSON строку из ранее предоставленных примеров. После чего  пропускали эту строку через JSON.parse() для создания объекта содержащего JSON данные, которые хранятся в cart переменной. На конец, мы проверяем наличие данных и выводим некоторую информацию средствами модального окна alert.

Выведется следующая информация:

johnsmith@example.com
WonderWidget

В реальном веб приложении, ваш JavaScript код должен принимать JSON строку как ответ от сервера (после посылки AJAX запроса), после чего парсите строку и выводите данные о содержимом корзины пользователю.

Создание и чтение JSON формата с помощью PHP

json и php
 

PHP, подобно JavaScript’у, имеет функции позволяющие конвертировать переменные в JSON формат, и наоборот. Давайте рассмотрим их.

Создание JSON строки из PHP переменной

Json_encode() принимает PHP переменную и возвращает JSON строку, репрезентируя данные переменной. Вот наш пример «корзины» написанный на PHP:

<?php
$cart = array(
  "orderID" => 12345,
  "shopperName" => "John Smith",
  "shopperEmail" => "johnsmith@example.com",
  "contents" => array(
    array(
      "productID" => 34,
      "productName" => "SuperWidget",
      "quantity" => 1
    ),
    array(
      "productID" => 56,
      "productName" => "WonderWidget",
      "quantity" => 3
    )
  ),
  "orderCompleted" => true
);

echo json_encode( $cart );
?>

Этот код выводит в точности такой результат, как и JavaScript пример – валидную JSON строку репрезентирующую содержимое переменных:

{"orderID":12345,"shopperName":"John Smith","shopperEmail":"johnsmith@example.com","contents":[{"productID":34,"productName":"SuperWidget","quantity":1},{"productID":56,"productName":"WonderWidget","quantity":3}],"orderCompleted":true}

В реалии, ваш PHP скрипт должен посылать JSON строку как ответ на AJAX запрос, где JavaScript будет использовать JSON.parse() для превращения строки в переменные.

В функции json_encode() можно указывать дополнительные параметры, позволяющие конвертировать некоторые символы в hex.

Создание PHP переменной из JSON строки

Аналогично к вышеописанному, существует функция json_decode(), позволяющая декодировать JSON строки и помещать содержимое в переменные.

<?php
$jsonString = '
{                                           
  "orderID": 12345,                         
  "shopperName": "John Smith",              
  "shopperEmail": "johnsmith@example.com",  
  "contents": [                             
    {                                       
      "productID": 34,                      
      "productName": "SuperWidget",         
      "quantity": 1                        
    },                                      
    {                                       
      "productID": 56,                      
      "productName": "WonderWidget",        
      "quantity": 3                         
    }                                       
  ],                                        
  "orderCompleted": true                    
}                                           
';

$cart = json_decode( $jsonString );
echo $cart->shopperEmail . "<br>";
echo $cart->contents[1]->productName . "<br>";
?>

Как и в случае с JavaScript, этот код выведет следующее:

johnsmith@example.com
WonderWidget

По умолчанию, json_decode() возвращает JSON объекты как PHP объекты. Подобно привычному синтаксису, мы используем -> для доступа к свойствам объекта.

Если в дальнейшем вы захотите использовать данные в виде ассоциативного массива, просто передайте вторым параметров true в функции json_decode(). Вот пример:

$cart = json_decode( $jsonString, true );
echo $cart["shopperEmail"] . "<br>";
echo $cart["contents"][1]["productName"] . "<br>";

Это выводит тот же результат:

johnsmith@example.com
WonderWidget

Также в функцию json_decode() можно передавать дополнительные аргументы, для определения обработки больших чисел и рекурсии.

В заключение о JSON формате

Если вы собрались создавать веб приложение использующее технологию Ajax, несомненно воспользуйтесь форматом JSON для обмена данными между сервером и браузером.

Надеюсь, вам понравилось читать эту статью. Успешной разработки!


Источник материала ...

Дальше: Создание семантических HTML + CSS шаблонов на 2 и 3 колонки


Дискуссия по теме    12 Комментариев
Добавить комментарий
Sergey 24.07.2016 ? 09:38
var t={"response":[34,{"uid":6492,"first_name":"Андрей","last_name":"Рогозов"},{"uid":87656615,"first_name":"Андрей","last_name":"Рогозов"}]} alert(t['response'][0]);
Максим 12.10.2015 в 01:12
Денис, если ещё актуально, то на php выводится так: $cart = json_decode( $jsonString ); print $cart->response[0]; или $cart = json_decode( $jsonString,true ); print $cart["response"][0]; Отлиичная статья, всё чётко, компактно, понятно. Единственное, что можно было бы добавить про исходную кодировку скриптов. JSON - формат, поддерживающий исключительно UTF-8 (при использовании русских букв в WIN1251 переменных конвертация происходить не будет). Рекомендуется переводить все скрипты в utf-8, но тем у кого это не получается или принципиально нужно использовать скрипты в WIN кодировке придётся дополнительно прогонять всё через iconv, например так: $jsonString = iconv('windows-1251','UTF-8',$jsonString);
Костя 05.10.2015 в 19:36
Спасибо большое за отличную статью! Все по делу, примеры понятные, написано доходчиво, воды в тексте нет! Тоже обычно не пишу комментарии, но не смог удержаться... Спасибо за Ваш труд! Больше бы подобных статей!
Повар 04.10.2015 в 23:26
Спасибо! Очень емко и информативно. Обычно даже ленюсь отписывать комментарии, но тут насколько понравилось, что аж не удержался:)
Андрей 17.09.2015 в 11:13
Весьма благодарен вам за отличную статью)
Денис 13.09.2015 в 21:09
а как вывести значение 34 из такого массива? {"response":[34,{"uid":6492,"first_name":"Андрей","last_name":"Рогозов"},{"uid":87656615,"first_name":"Андрей","last_name":"Рогозов"}]}
Денис 07.10.2014 в 17:32
Спасибо! Хорошая статья!
Сергей 03.10.2014 в 11:17
Доступно, спасибо! :)
Дима 24.09.2014 в 16:29
Спасибо огромное!!! Отличная статья!!!
Руслан 07.10.2013 в 11:43
Хорошая статья, все понятно про формат JSON, а как отправлять данные в заголовках HTTP?
Тарас 07.10.2013 в 18:43
Имеете в виду GET запрос? Например: sitear.ru/index.php?variable=value тогда, файл index.php получит следующее: $getvar = $_GET['variable']; // значение переменной будет value
Руслан 07.10.2013 в 18:55
Спасибо азобрался, через сcurl, для работы с api яндекса нужно было
Добавить комментарий
Просмотров: 84468