- → Программирование
- → JavaScript
- → Статьи
JSON формат: создание данных, использование с PHP и JS
Что такое JSON и на что он способен? В этой статье вы узнаете, как использовать JSON для легкой работы с данными. Так же мы рассмотрим, как работать с JSON используя при этом PHP и JavaScript.
Если вы разрабатывали вебсайты или веб-приложения в целом, вероятней всего вы слышали о 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. Это очень удобно, когда вы передаете несколько переменных или целые массивы данных.
Как это выглядит на примере:
- Пользователь кликает по превьюшке картинки
- JavaScript обрабатывает это событие и посылает ajax запрос к PHP скрипту, передавая ID картинки.
- На сервере, php получает описание картинки, имя картинки, адрес к большому изображению и другую информацию из базы данных. Получив, преобразовывает в JSON формат и отправляет обратно на страницу пользователя.
- JavaScript получает ответ в виде JSON, обрабатывает данные, формирует html код и выводит увеличенное изображение с описанием и другой информацией.
Так происходит увеличение картинки, без перезагрузки страницы в браузере. Это очень удобно, когда нам необходимо получить частичные данные, или передать небольшой объем информации на сервер.
Всеми любимый jQuery, имеет функции getJSON() и parseJSON(), которые помогают работать с форматом через ajax запросы.
Как создавать JSON строки?
Ниже предоставлены основные правила создания JSON строк:
- JSON строка содержит как массив значений, так и объект (ассоциативный массив с парами имя/значение).
- Массив должен быть обвернут в квадратные скобки, [ и ], может содержать список значений, которые отделяются через кому.
- Объекты обворачиваются с помощью фигурных дужек, { и }, также содержат разделенные комой пары имя/значение.
- Пары имя/значение состоят из имя поля (в двойных кавычках), после чего следует двоиточие ( : ) , после значение данного поля.
- Значения в массиве или объекте могут быть:
- Числовые (целые или дробные с точкой)
- Строковые (обвернутые в двойные кавычки)
- Логические (true или false)
- Другие массивы (обвернутые в квадратные скобки [ и ])
- Другие объекты (обвернутые в фигурные дужки { и })
- Нулевое значение (null)
Важно! Если вы используете двойные кавычки в значениях, экранируйте их с помощью обратного слеша: \". Также можно использовать hex закодированные символы, так как вы это делаете в других программных языках.
Простой пример JSON данных
Следующий пример показывает, как можно сохранять данные в «корзине» интернет магазина с помощью JSON формата:
{
"orderID": 12345,
"shopperName": "John Smith",
"shopperEmail": "[email protected]",
"contents": [
{
"productID": 34,
"productName": "SuperWidget",
"quantity": 1
},
{
"productID": 56,
"productName": "WonderWidget",
"quantity": 3
}
],
"orderCompleted": true
}
Давайте разберем эти данные по частям:
- В начале и конце мы использует фигурные дужки { и }, которые дают понять, что это объект.
- Внутри объекта мы имеем несколько пар имя/значение:
- "orderID": 12345 – поле с именем orderId и значение 12345
- "shopperName": "John Smith" – поле с именем shopperName и значение John Smith
- "shopperEmail": "johnsmith@example.com" – подобно, как и в предыдущем поле, здесь храниться email покупателя.
- "contents": [ ... ] – поле с именем content, значение которого массив.
- "orderCompleted": true – поле с именем orderCompleted, значение которого true
- Внутри массива contents, мы имеем два объекта, которые отображают содержимое корзины. Каждый объект продукта имеет три свойства: productID, productName, quantity.
На последок, так как JSON идентичен с объектами в JavaScript, вы легко можете взять этот пример и создать из него JavaScript объект:
<script type="text/javascript">
var cart = {
"orderID": 12345,
"shopperName": "John Smith",
"shopperEmail": "[email protected]",
"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>[email protected]</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 формат прост, его сложно писать вручную при разработке веб приложений. Более того, часто приходится конвертировать 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": "[email protected]",
"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":"[email protected]",
"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": "[email protected]", \
"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.
Выведется следующая информация:
[email protected] WonderWidget
В реальном веб приложении, ваш JavaScript код должен принимать JSON строку как ответ от сервера (после посылки AJAX запроса), после чего парсите строку и выводите данные о содержимом корзины пользователю.
Создание и чтение JSON формата с помощью PHP
PHP, подобно JavaScript’у, имеет функции позволяющие конвертировать переменные в JSON формат, и наоборот. Давайте рассмотрим их.
Создание JSON строки из PHP переменной
Json_encode() принимает PHP переменную и возвращает JSON строку, репрезентируя данные переменной. Вот наш пример «корзины» написанный на PHP:
<?php $cart = array( "orderID" => 12345, "shopperName" => "John Smith", "shopperEmail" => "[email protected]", "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":"[email protected]","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": "[email protected]",
"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, этот код выведет следующее:
[email protected] WonderWidget
По умолчанию, json_decode() возвращает JSON объекты как PHP объекты. Подобно привычному синтаксису, мы используем -> для доступа к свойствам объекта.
Если в дальнейшем вы захотите использовать данные в виде ассоциативного массива, просто передайте вторым параметров true в функции json_decode(). Вот пример:
$cart = json_decode( $jsonString, true ); echo $cart["shopperEmail"] . "<br>"; echo $cart["contents"][1]["productName"] . "<br>";
Это выводит тот же результат:
[email protected] WonderWidget
Также в функцию json_decode() можно передавать дополнительные аргументы, для определения обработки больших чисел и рекурсии.
В заключение о JSON формате
Если вы собрались создавать веб приложение использующее технологию Ajax, несомненно воспользуйтесь форматом JSON для обмена данными между сервером и браузером.
Надеюсь, вам понравилось читать эту статью. Успешной разработки!
Источник материала ...
Дальше: Создание семантических HTML + CSS шаблонов на 2 и 3 колонки
Development — Taras Moroz