Обычно JSON используется для получения данных с сервера и вывода их на веб-странице.
В этой главе мы рассмотрим как обмениваться данными JSON между клиентом и сервером на PHP.
PHP файл
В PHP есть несколько встроенных функций для работы с данными JSON.
Объекты в PHP могут конвертироваться в JSON при помощи PHP функции json_encode():
<?php
$myObj->name = "John";
$myObj->age = 30;
$myObj->city = "New York";
$myJSON = json_encode($myObj);
echo $myJSON;
?>
Клиентский JavaScript
К PHP файлу из предыдущего примера можно обратиться по AJAX запросу, используя на стороне клиента следующий JavaScript код. Функция JSON.parse() конвертирует полученные данные в JavaScript объект:
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myObj = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myObj.name;
}
};
xmlhttp.open("GET", "demo_file.php", true);
xmlhttp.send();
PHP массив
Массивы в PHP также конвертируются в JSON при помощи PHP функции json_encode():
<?php
$myArr = array("John", "Mary", "Peter", "Sally");
$myJSON = json_encode($myArr);
echo $myJSON;
?>
Клиентский JavaScript
К PHP массиву из предыдущего примера также можно обратиться по AJAX запросу, используя на стороне клиента следующий JavaScript код. Функция JSON.parse() конвертирует полученные данные в JavaScript массив:
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myObj = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myObj[2];
}
};
xmlhttp.open("GET", "demo_file_array.php", true);
xmlhttp.send();
PHP база данных
PHP — это серверный язык программирования и используется для операций, выполняемых только на стороне сервера, например, для доступа к базе данных.
Представьте, что у вас на сервере есть база данных, в которой содержится информация о товарах, покупателях и поставщиках. И вы хотите получить 10 первых записей в таблице покупателей ("customers").
Используем функцию JSON.stringify(), чтобы конвертировать JavaScript объект в JSON:
obj = { "table":"customers", "limit":10 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "json_demo_db.php?x=" + dbParam, true);
xmlhttp.send();
Объяснение примера:
- Определим объект, содержащий свойства table и limit.
- Конвертируем объект в строку JSON.
- Отправим запрос к PHP файлу с полученной строкой JSON в качестве параметра.
- Дождемся ответа от сервера (результат будет в формате JSON).
- Выведем полученный результат на странице.
Теперь посмотрим на PHP файл:
<?php
header("Content-Type: application/json; charset=UTF-8");
$obj = json_decode($_GET["x"], false);
$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");
$result = $conn->query("SELECT name FROM ".$obj->table." LIMIT ".$obj->limit);
$outp = array();
$outp = $result->fetch_all(MYSQLI_ASSOC);
echo json_encode($outp);
?>
Объяснение PHP файла:
- Конвертируем данные запроса в объект при помощи PHP функции json_decode().
- Обращаемся к базе данных и заполняем массив запрошенными данными.
- Добавляем массив к объекту и возвращаем объект в виде строки JSON, используя функцию json_encode().
Обход полученных данных
Теперь конвертируем данные, полученные от PHP файла, в JavaScript объект или в данном случае в JavaScript массив. Для этого используем функцию JSON.parse():
...
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myObj = JSON.parse(this.responseText);
for (x in myObj) {
txt += myObj[x].name + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
};
...
PHP метод POST
При отправке данных на сервер лучше всего использовать метод POST.
Чтобы послать AJAX запрос, используя метод POST, следует задать нужный метод и откорректировать заголовок.
Данные, отправляемые на сервер, теперь должны быть аргументом в методе send():
obj = { "table":"customers", "limit":10 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myObj = JSON.parse(this.responseText);
for (x in myObj) {
txt += myObj[x].name + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
};
xmlhttp.open("POST", "json_demo_db_post.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);
Единственным отличием в PHP файле будет метод для получения переданных данных. Вместо $_GET будет использоваться $_POST:
<?php
header("Content-Type: application/json; charset=UTF-8");
$obj = json_decode($_POST["x"], false);
$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");
$result = $conn->query("SELECT name FROM ".$obj->table." LIMIT ".$obj->limit);
$outp = array();
$outp = $result->fetch_all(MYSQLI_ASSOC);
echo json_encode($outp);
?>