Этот сайт использует cookies. Продолжение работы с сайтом означает, что Вы согласны!
Обмен данными в формате JSON
Хорошей альтернативой использования XML-документа для обмена данными с сервером служит использование JSON-объектов. XML-документ из листинга 10.9 можно представить в качестве JSON-объекта следующим образом.
var json = '{' +
'"text1":"Поле 1 – Строка 1",' +
'"text2":"Поле 2 – Строка 2"' +
'}';
Чтобы преобразовать строку json
в JSON-объект, достаточно обработать ее с помощью функции eval()
. Функция eval()
помещает JSON-объект в память интерпретатора JavaScript и возвращает ссылку на него. Для корректной работы функции eval()
строку, содержащую JSON-объект, необходимо взять в круглые скобки.
var jsonObject = eval('(' + json + ')');
Получить доступ к данным можно следующим образом.
var text1 = jsonObject.text1;
var text2 = jsonObject.text2;
В качестве JSON-объекта может быть указан массив с данными.
var json = '["Элемент1", "Элемент2", "Элемент3", "Элемент4"]';
var jsonObject = eval('(' + json + ')');
alert(jsonObject[0]); // Выведет: Элемент1
JSON-объект может иметь сложную структуру. Например, он может быть массивом объектов.
var json = '[ {"text1":"Поле 1", "text2":"Поле 2"}, ';
json += '{"text3":"Поле 3", "text4":"Поле 4"} ]';
var jsonObject = eval('(' + json + ')');
alert(jsonObject[1].text3); // Выведет: Поле 3
Или объектом, значения свойств которого являются массивами.
var json = '{ "elem1":[1, 2, 3], "elem2":[4, 5, 6] }';
var jsonObject = eval('(' + json + ')');
alert(jsonObject.elem2[0]); // Выведет: 4
Можно также комбинировать различные варианты.
var json = '{ "elem1":[{ "txt1": "Текст1", "txt2": "Текст2" }, 2] }';
var jsonObject = eval('(' + json + ')');
alert(jsonObject.elem1[0].txt2); // Выведет: Текст2
Приведем пример обмена данными в формате JSON. Создадим документ с формой (листинг 10.10), который будет обмениваться данными с файлом ajax.php (листинг 10.11), расположенным на сервере.
Листинг 10.10. Обмен данными в формате JSON
<!doctype html>
<html>
<head>
<title>Обмен данными в формате JSON</title>
<meta charset="utf-8">
<script>
function f_GET() {
// Отправка запроса методом GET
var link;
var url;
var txt1 = document.getElementById("text1").value;
var txt2 = document.getElementById("text2").value;
if (txt1 == "" || txt2 == "") {
window.alert("Не заполнено поле");
return false;
}
if (window.XMLHttpRequest) {
link = new XMLHttpRequest();
}
else {
if (window.ActiveXObject) {
var XMLHTTP = ["MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
for (var i=0; i<4; i++) {
try { // Обработка исключений
link = new ActiveXObject(XMLHTTP[i]);
break; // Если объект создан, то выход из цикла
}
catch (e) {}
}
}
}
if (!link) {
window.alert("Ваш веб-браузер не поддерживает технологию Ajax");
return false;
}
url = "/ajax.php?text1=" + encodeURIComponent(txt1);
url += "&text2=" + encodeURIComponent(txt2);
// Подготовка асинхронного запроса методом GET
link.open('GET', url, true);
link.onreadystatechange = function() {
f_razborRequest(link);
};
link.send(null); // Отправляем запрос
document.getElementById("otvet").innerHTML = "Загрузка...";
}
function f_razborRequest(link) {
// Обрабатываем асинхронный запрос
if (link.readyState == 4) {
if (link.status == 200) { // Запрос успешно обработан
var json = link.responseText;
var otvet = eval('(' + json + ')');
var msg = otvet.text1 + "<br>" + otvet.text2;
document.getElementById("text1").value = "";
document.getElementById("text2").value = "";
document.getElementById("otvet").innerHTML = msg;
}
else {
document.getElementById("otvet").innerHTML = "Ошибка";
}
}
}
</script>
</head>
<body>
<input type="text" id="text1"><br>
<input type="text" id="text2"><br>
<input type="button" value="Отправить методом GET"
onclick="f_GET();">
<br>
<div id="otvet"></div>
</body>
</html>
Листинг 10.11. Исходный код файла ajax.php
<?php
header('Content-Type: text/plain; charset=utf-8');
if (isset($_GET['text1']) && isset($_GET['text2'])) {
$text1 = htmlspecialchars($_GET['text1'], ENT_COMPAT, 'UTF-8');
$text2 = htmlspecialchars($_GET['text2'], ENT_COMPAT, 'UTF-8');
$arr = array('text1' => $text1, 'text2' => $text2);
echo json_encode($arr);
}
else {
$arr = array('text1' => 'Данные не получены', 'text2' => '');
echo json_encode($arr);
}
?>
Для работы с JSON-объектами в PHP существует две функции.
json_encode(<Ассоциативный массив>)
— преобразует ассоциативный массив в JSON-объект.json_decode(<JSON-объект>[, <Тип результата>])
— производит разбор JSON-объекта. Необязательный параметр<Тип результата>
может принимать следующие значения:
true
— результат в виде ассоциативного массива;false
— результат в виде объекта (значение по умолчанию).
Рассмотрим пример.
<?php
$arr['text1'] = 'Строка 1';
$arr['text2'] = "Строка 2";
$json = json_encode($arr);
$arr2 = json_decode($json);
echo $arr2->text1, '<br>'; // Строка 1
echo $arr2->text2, '<br>'; // Строка 2
$arr3 = json_decode($json, true);
echo $arr3['text1'], '<br>'; // Строка 1
echo $arr3['text2']; // Строка 2
?>
Самоучитель по jQuery Учебник по jQuery 3.5.1 и AJAX в формате PDF
Помощь сайту
Yandex-деньги: 410011140483022
ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов