ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

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

Формат JSON. Обработка данных методом $.getJSON()

Обработка данных методом $.getJSON

Еще один популярный формат для отправки данных с сервера -JSON (JavaScript Object Notation - представление oбъeктoвJavaScript). Он написан на языке JavaScript и похож на формат XML тем, что является методом обмена данными. Данные в формате JSON - это строка, форматированная как объект JavaScript. Браузеры могут быстро и легко преобразовать данные в формате JSON в код JavaScript. С другой стороны, документ XML должен разбираться кодом JavaScript, что замедляет его работу и требует более длительного программирования. Поэтому формат JSON чаще применяется для обмена данными с помощью технологии Ajax. Учитывая это обстоятельство рассмотрим использование этого формата в технологии Ajax более детально, с примерами часто встречаемыми на практике.

В сущности,JSОN представляет собой литерал oбъeктa JavaScript, или коллекцию пар имя/значение. Вот пример данныхJSОN:

{
"login":"admin",
"password":"qwert",
"email":"abc@asdn.com"
}

Знак "{" отмечает начало объектаJSОN, тогда как "}" - его конец. Внутри скобок находятся пары имя/значение, например, "login":"admin". Пары отделяются друг от друга запятой. В отличие от обычного объекта JavaScript имена свойств JSON и все строковые значения должны заключаться в двойные кавычки. Другими словами, следующий код некорректен:

'login':'admin',

А правильным является код:

"login":"admin",

Как и объекты JavaScript, пары имя/значение отделяются друг от друга запятой. Однако не следует ставить запятую после последней пары (иначе некоторые версии браузера Internet Explorer выдадут ошибку).

Пару имя/значение можно представить как переменную: имя соответствует имени переменной, а значение - ее содержимому. В предыдущем примере "login" действует как переменная, хранящая строку "admin" внутри себя.

Когда веб-сервер отвечает на Аjах-запрос, он может возвратить строку в формате JSON. Сервер не посылает JavaScript-кoд: он посылает текст, отформатированный как объект JSON. Использовать код JavaScript невозможно до тех пор, пока строка не конвертирована в объект JSON. К счастью, библиотекаjQuеrу предусматривает специальную функцию $.getJSON(), которая заботится обо всех деталях. Функция $.getJSON() во многом похожа на функции $.get() и $.post(). Базовый код для нее выглядит так:

jQuery.getJSON( url [, data ] [, success ] )

Где:

  1. url: обязательный параметр, содержащий адрес ресурса, к которому будет обращаться запрос;
  2. data: необязательный параметр, содержащий простой объект javascript или строку, которые будут отправлены на сервер вместе с запросом;
  3. success(data, textStatus, jqXHR): необязательный параметр, представляющий функцию обратного вызова, которая будет выполняться при успешном выполнении запроса.

Это сокращенная Ajax функция, которая эквивалентна следующему коду:

$.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: success
});

Данные отправляемые на сервере передаются в URL строке как GET параметры. Если значением параметра data является объект (не строка), то он конвертируется в строку (с предварительным url-encode кодированием значений) перед добвлением к URL адресу.

На выходе метод getJSON возвращает объект jqXHR, связанный с текущем запросом.

Доступ к данным JSON

Есть два способа доступа к данным объектаJSОN: dot syntax и array notation.Dot syntax, или точечный синтаксис, указывает на определенное свойство объекта, что достигается путем вставки точки между именем объекта и названием свойства, доступ к которому нужно получить. Например, код 'аЬс'.length предоставляет доступ к свойству length строки и возвращает число букв в строке 'аЬс', то есть 3.

Предположим, вы создали переменную и храните в ней литерал объекта:

var formData = {
"login":"admin",
"password":"qwervb",
"email":"abc@asdn.com"
        };

В этом случае переменная formData содержит литерал объекта, так что если вы хотите получить имя человека, содержащееся в объекте, используйте следующий точечный синтаксис:

fornData.login //admin

Для пароля:

fornData.password //qwervb

Для Email

fornData.email //abc@asdn.com

То же самое справедливо для объекта JSON, возвращаемого веб-сервером.


$.getJSON("json1.php",
formData,
function(data){
$( "#main" ).html("Ваш логин: "+data.login+ ". Ваш пароль: "+data.password + ". Ваш email: "+data.email);
alert("Данные с сервера получены "+formData.login +"; " + data.password + " ;" + formData.email);
},
alert("Данные на сервер загружены")
)

Параметр url это ни что иное, как серверный файл json1.php. Параметр data это переменная formData, которая представляет собой литерал объекта json. Параметр success это функция обратного вызова function(data). Если вы обратили внимание на точечный синтаксис, с помощью которого выводится информация полученная с сервера, то в одном случае используется код data.login, в другом formData.login. В сущности от этого ничего не меняется, т.к. в том и другом случае они представляют один и тот же параметр data.

Ни один код работать не будет, если есть ошибки в серверном файле. Мы отправляем серверу данные в GET формате в виде массива, который при передаче конвертируется в строку, а получаем с сервера уже в формате JSON в виде строки. Поэтому в серверном файле всю полученную информацию необходимо преобразовать JSON-последовательность.


//файл json1.php
sleep(1);
if(!empty($_REQUEST['login'])&&!empty($_REQUEST['password'])&&!empty($_REQUEST['email'])){
$arr = [
"login"=>"$_REQUEST[login]",
"password"=> "$_REQUEST[password]",
"email"=> "$_REQUEST[email]"
] ;
echo json_encode($arr);
}else {
exit("Ошибка в получении данных");
}

Как мы уже говорили, серверный сценарий получает строку, из которой создается массив данных отправленных с формы и храним их в переменной $arr . Функция json_encode($arr) преобразует переменную $arr в JSON последовательность.


$(document).ready(function(){
$("#form").submit(function(event){
// Предотвращаем обычную отправку формы
event.preventDefault();
var formData = {
login:$("#login").val(),
password:$("#password").val(),
email:$("#email").val()
};
$.getJSON("json1.php",
formData,
function(data){
$( "#main" ).html("Ваш логин: "+data.login+ ". Ваш пароль: "+data.password + ". Ваш email: "+data.email);
alert("Данные с сервера получены "+formData.login +"; " + data.password + " ;" + formData.email);
},
alert("Данные на сервер загружены")
)
});

});
<html>
<head>
<meta charset="utf-8">
<title>Формат JSON. Обработка данных методом $.getJSON()</title>
<style type="text/css">
#img
{
display:none;
position:absolute;
top:140px;
left: 80px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#form").submit(function(event){
// Предотвращаем обычную отправку формы
event.preventDefault();
var formData = {
login:$("#login").val(),
password:$("#password").val(),
email:$("#email").val()
};
$.getJSON("test/json1.php",
formData,
function(data){
$( "#main" ).html("Ваш логин: "+data.login+ ". Ваш пароль: "+data.password + ". Ваш email: "+data.email);
alert("Данные с сервера получены "+formData.login +"; " + data.password + " ;" + formData.email);
},
alert("Данные на сервер загружены")
)
});

});
</script>
</head>
<body>
<div id="main"></div>
<form id="form" >
<label for="login">Ваш логин:</label><br>
<input name="login" type="text" id="login" required placeholder="Введите логин"><br>
<label for="password">Ваш пароль:</label><br>
<input name="password" type="password" id="password" required placeholder="Введите пароль"><br>
<label for="email">Ваш email:</label><br>
<input type="email" id="email" required placeholder="Введите email"><br><br>
<input id="sub1" type="submit" value="Передать данные скрипту" >
</form>
<p id="img"><img src="../../images/loader.gif" > Пожалуйста, подождите, файл находится в обработке.</p>
</body>
</html>

Благодаря своей простоте восприятия JSON получил широкое распространение в среде веб-разработчиков. Взаимодействие Ajax, JSON и PHP является очень важной темой, требующей всестороннего изучения, поэтому следующая статья будет посвящена более детальному рассмотрению использования JSON в асинхронных Ajax запросах.