Ajax json php примеры


Ajax json php примеры Ajax json php примеры Ajax json php примеры Первый файл_________index.php:

 <!DOCTYPE HTML> <html>  <head>    <meta charset='utf-8' />  	<meta http-equiv="content-type" content="text/html" />  	<title>зависимый выпадающий список</title>   <script type='text/javascript' src='jquery.js'></script>   <script type='text/javascript' src='handler.js'></script>   </head>  <body>  <label for="year">Год   <select name="year" id="year">   <option value="">...</option>   <option value="2014">2014</option>   <option value="2013">2013</option>   </select>  </label>  <label for="year">Марка   <select name='brand' id='brand'>    /* место для подгружаемого списка */     </select>  </body></html> 


Ajax json php примеры Ajax json php примеры Ajax json php примеры Второй файл_________select.php:

 <?php  $year = $_POST['year'];  $connect = new mysqli("localhost", "user", "password", "db_name");  $table="year_$year";  /* Посылаем запрос серверу */  if ($result = mysqli_query($connect, "SELECT DISTINCT brand FROM $table ")) {     while($row = $result->fetch_array(MYSQL_ASSOC)) {   $myArray[] = $row;   }   echo $myArray;  //echo json_encode($myArray);  }  $result->close();  $mysqli->close(); 

Json в результате выглядит вот так
[{"brand":"Alfa Romeo"},{"brand":"Acura"},{"brand":"Alfa Romeorn"},{"brand":"Audi"}]

Ajax json php примеры Ajax json php примеры Ajax json php примеры Третий файл_________handler.js:


 $(document).ready(function(){   $('#year').change(function(){   var year = ($(this).val());// здесь определяю переменную по выбору  $.ajax({   type: "POST",   url: "select.php",     ???? ____здесь не знаю что писать____?????       failure: function(errMsg) {   alert(errMsg);   }   });        });   }); 

Задача — определив выбор селекта отправить это значение в файл select.php ajax запросом.
Ну не получается у меня правильно сформировать этот ajax/
Как сгенерировать теги <option>и массив json сунуть по одному
Подскажите где ‘золото зарыто’, как его формировать.
Заранее Благодарствую!!!!Ajax json php примеры

javascript.ru

jQuery имеет ряд функций, позволяющих обмениваться данными с сервером без перезагрузки страницы (технология ajax).

AJAX функции разобраны для JQuery 1.5+

http://jquery.page2page.ru AJAX

$.ajax(url,[settings]):jqXHR

Осуществляет запрос к серверу без перезагрузки страницы.
Это низкоуровневый метод, обладающий большим количеством настроек.
Он лежит в основе работы всех остальных методов ajax.


url — адрес запроса.

settings — в этом параметре можно задать настройки для данного запроса.

Задается с помощью объекта в формате

{имя:значение, имя:значение...}

Ни одна из настроек не является обязательной.

Установить настройки по умолчанию можно с помощью метода $.ajaxSetup()

url:string

Определяет адрес, на который будет отправлен запрос.

type:string

Определяет тип выполняемого запроса GET или POST.

success(data, textStatus, jqXHR):function

Функция, которая будет вызвана в случае удачного завершения запроса к серверу.

Ей будут переданы три параметра: данные, присланные сервером и уже прошедшие предварительную обработку (которая отлична для разных dataType).

timeout:integer

Время ожидания ответа от сервера. Задается в в миллисекундах.

Если это время будет превышено, запрос будет завершен с ошибкой и произойдет событие error , которое будет иметь статус timeout.

async:boolean(true)

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

Если вам понадобиться синхронное выполнение запроса, то установите параметр в false.


Имейте ввиду, что выполнение запросов в синхронном режиме может привести к блокировке страницы, пока запрос не будет полностью выполнен.

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

// присланные от сервера данные, запишем в переменную html  var html = $.ajax({   url: "some.php",   async: false   }).responseText;

beforeSend(jqXHR, settings):function

Функция, которая будет вызвана непосредственно перед отправкой ajax-запроса на сервер.
Такая функция может быть полезна для модификации jqXHR-объекта.

Вторым аргументом передаются настройки запроса.

beforeSend относится к ajax-событиям. Поэтому если указанная в нем функция вернет false, ajax-запрос будет отменен.

$.ajax({  	url: "some.php",  	beforeSend: function(jqXHR, settings) {  		// что-то делаем ...  	}  	success: function(data){  		alert( "Прибыли данные: " + data );   	}  });

complete(jqXHR, textStatus):function

Функция, которая будет вызвана после завершения ajax-запроса

Происходит в случае любого завершения запроса.

Вызывается позднее функций-обработчиков успешного success или аварийного error завершения запроса.

textStatus — статус выполнения запроса:
строковое значение: success, notmodified, error, timeout, abort, parsererror


$.ajax({  	url: 'ajax/test.html',  	complete: function(jqXHR, textStatus) {  		if (textStatus == 'success') {  			alert('Успешно.');  		}  		if (textStatus == 'error') {  			alert('Ошибка.');  		}  	}  });

context:object

Позволяет указать объект который будет передаваться в переменную $(this), для всех обработчиков, связанных с выполнением текущего запроса.

По умолчанию, в context храниться объект с настройками текущего ajax-запроса.

В качестве контекста можно задать DOM-элемент, который должен каким-либо образом сигнализировать о завершении запроса:

$.ajax({ url: "test.html", context: document.body, success: function(){   // в данном случае this будет равен document.body   $(this).addClass("done");  }});

data:object,string

Данные, которые будут отправлены на сервер.

Если они заданы не строчным значением, то будут предварительно преобразованы в urlencoded строку.

В случае запроса методом GET, строка с данными добавляется в конец url.

Если данные задаются с помощью объекта, то он должен соответствовать формату:
{fName1:value1, fName2:value2, …}

$.ajax({  	type: "POST",  	url: "some.php",  	// передача в качестве объекта  	// поля будут закодированые через encodeURIComponent автоматически  	data: {   		name: "Вася",   		lastname: "Пупкин"   	},  	success: function(msg){  		alert( "Прибыли данные: " + msg );  	}  });

Пример 2


$.ajax({  	type: "POST",  	url: "jq_post1.php",  	// передача в качестве строки  	// кодирование выполняется "вручную"  	data: 'name=' + encodeURIComponent("Вася") + '&lastname='+ encodeURIComponent("Пупкин"),  	success: function(data){  		$('div').html(data);  	}  });


Ajax json php примеры Скачать ПРИМЕР

dataType:string

Тип данных, в котором ожидается получить ответ от сервера.
Если он не задан, jQuery попытается определить его автоматически с помощью полученного от сервера MIME.

Возможные значения этого параметра:
xml — полученный xml-документ будет доступен в текстовом виде. С ним можно работать стандартными средствами jQuery (также как и с документом html).
html — полученный html будет доступен в текстовом виде. Если он содержит скрипты в тегах <script>, то они будут автоматически выполнены, только когда html-текст будет помещен в DOM.
script — полученные данные будут исполнены как javascript. Переменные, которые обычно содержат ответ от сервера будут содержать объект jqXHR.
json — полученные данные являются JSON строкой. Jquery декодирует JSON-строку в объект.
text — полученные данные окажутся доступными в виде обычного текста, без предварительной обработки.


Пример с получением JSON

// http://javascript.ru/forum/jquery/16938-foreach-json-obekta.html  function forEach(data, callback){   for(var key in data){  	if(data.hasOwnProperty(key)){  	 callback(key, data[key]);  	}   }  }    $.ajax({  	url: "jq_json.php",  	dataType: 'json',  	success: function(data){  		var str = [];  		forEach(data,function(key,value) {  			str.push('<b>' + key + '</b> = ' + value);  		});  		$('div').html( str.join('<br>') );  	}  });

jq_json.php

<?php    $z['object_or_array'] = "string value";  $z['empty'] = false;  $z['parse_time_nanoseconds'] = 19608;  $z['validate'] = true;  $z['size'] = 1;    echo json_encode($z);


Ajax json php примеры Скачать ПРИМЕР

$.param(obj):string

Преобразует объект, массив или массив объектов в строку urlencoded, которая соответствует формату передачи данных через url.


Продемонстрируем преобразование на простом примере:

var myObject = {   one: 1,    two: 2,    three: 3,   vasia: 'Вася пупкин'  };  var recursiveEncoded = $.param(myObject);     alert(recursiveEncoded);    // one=1&two=2&three=3&vasia=%D0%92%D0%B0%D1%81%D1%8F+%D0%BF%D1%83%D0%BF%D0%BA%D0%B8%D0%BD    //

Выведем на экран результат довольно сложного преобразования:

var myObject = {   a: {   one: 1,    two: 2,    three: 3   },    b: [1,2,3]  };  var recursiveEncoded = $.param(myObject);  var recursiveDecoded = decodeURIComponent($.param(myObject));     alert(recursiveEncoded);  alert(recursiveDecoded);

В результате, на экране появятся два сообщения:

a%5Bone%5D=1&a%5Btwo%5D=2&a%5Bthree%5D=3&b%5B%5D=1&b%5B%5D=2&b%5B%5D=3  a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=3

.serialize():string

Возвращает строку, с именами и значениями выбранных элементов формы.
Эта строка будет иметь формат параметров url-запроса.

Продемонстрируем работу функции на простом примере:

<form>   <input type="text" name="a" value="1" id="a" />   <textarea name="b" rows="8" cols="40">2</textarea>  </form>     <script>   var s = $('form').serialize();   alert(s);   // В результате, переменной s будет присвоено значение   // a=1&b=2  </script>

Элементы формы, отвечающие за загрузку файлов, а так же кнопки отправки, не будут присутствовать в результате, возвращенном функцией.


.serializeArray():array

Возвращает массив объектов, содержащий данные элементов формы.

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

[{name:"name1", value:"val1"}, {name:"name2", value:"val2"},...] 

Это соответствуют формату JSON.

Продемонстрируем работу функции на простом примере:

<form>   <input type="text" name="a" value="1" id="a" />   <textarea name="b" rows="8" cols="40">2</textarea>  </form>     <script>   var s = $('form').serializeArray();   alert(s);  </script>

В результате, переменной s будет присвоено значение

[{name:"a", value:"1"}, {name:"b", value:"2"}]

Элементы формы, отвечающие за загрузку файлов, а так же кнопки отправки, не будут присутствовать в результате, возвращенном функцией.

$.get(url,[data],[callback],[dataType])

url — url-адрес, по которому будет отправлен запрос.
data — данные, которые будут отправлены на сервер.
Они должны быть представлены в объектом, в формате:

{fName1:value1, fName2:value2, ...}

callback(data, textStatus, jqXHR) — пользовательская функция, которая будет вызвана после ответа сервера.
dataType — ожидаемый тип данных, которые пришлет сервер в ответ на запрос.


Пример

<button>SEND</button><hr>  param1 <input type="text" name="param1" value="param1" /><br>  param2 <input type="text" name="param2" value="2"/>  <div style="border:1px solid red; padding: 5px;"></div>  <script type="text/javascript">  $('button').click(function() {  	$.get(  		"jq_post1.php",  		{  			param1: $('input[name=param1]').val(),  			param2: $('input[name=param2]').val()  		},  		function(data) {  			$('div').html(data);  		}  	);  	return false;  });  </script>


Ajax json php примеры Скачать ajax_jq_get2.zip

$.post(url,[data],[callback],[dataType])

Осуществляет запрос к серверу методом POST, без перезагрузки страницы.

Пример

<button>SEND</button><hr>  param1 <input type="text" name="param1" value="param1" /><br>  param2 <input type="text" name="param2" value="2"/>  <div style="border:1px solid red; padding: 5px;"></div>  <script type="text/javascript">  $('button').click(function() {  	$.post(  		"jq_post1.php",  		{  			param1: $('input[name=param1]').val(),  			param2: $('input[name=param2]').val()  		},  		function(data) {  			$('div').html(data);  		}  	);  	return false;  });  </script>


Ajax json php примеры Скачать ajax_jq_post2.zip

Пример с одновременной передачей GET и POST данных

<button>SEND</button><hr>  g_param1 <input type="text" name="g_param1" value="param1" /><br>  g_param1 <input type="text" name="g_param2" value="2"/><br>  p_param1 <input type="text" name="p_param1" value="param1" /><br>  p_param1 <input type="text" name="p_param2" value="2"/>  <div style="border:1px solid red; padding: 5px;"></div>  <script type="text/javascript">  $('button').click(function() {  	var getp = {};  	// через цикл each записываем поля объекта getp  	$('input[name=g_param1],input[name=g_param2]').each(function(){  		getp[$(this).attr('name')] = $(this).val();  	});  	  	$.post(  		// c помощью функции $.param формируем GET строку  		"jq_post1.php?" + $.param(getp),  		{  			p_param1: $('input[name=p_param1]').val(),  			p_param2: $('input[name=p_param2]').val()  		},  		function(data) {  			$('div').html(data);  		}  	);  	return false;  });  </script>


Ajax json php примеры Скачать ajax_jq_getpost.zip

.load(url,[data],[callback],[dataType])

Осуществляет запрос к серверу без перезагрузки страницы.
Полученные от сервера данные будут автоматически помещены внутрь выбранных элементов.

.load() является наиболее простым средством для подгрузки и вставки недостающего содержимого с сервера.

Он делает ajax-запрос к серверу и вставляет полученные данные в элементы страницы, к которым применялся метод:

// поместим содержимое страницы <tt>http://hostname.ru/ajax/test.html</tt>  // внутрь элемента с id = result  $("#result").load("ajax/test.html");

Организуем ajax-запрос с передачей параметров

$("#result").load(  	"jq_post1.php",  	{  		param1: $('input[name=param1]').val(),  		param2: $('input[name=param2]').val()  	}  );


Ajax json php примеры Скачать ajax_jq_load.zip

$.getJSON(url,[data],[callback])

Производит запрос JSON-данных у сервера, методом GET, без перезагрузки страницы.

$.getJSON() является сокращенным вариантом функции $.ajax(), вызванной со следующими параметрами:

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

Пример

function forEach(data, callback){   for(var key in data){  	if(data.hasOwnProperty(key)){  	 callback(key, data[key]);  	}   }  }    $.getJSON(  	"jq_json.php",  	function(data){  		var str = [];  		forEach(data,function(key,value) {  			str.push('<b>' + key + '</b> = ' + value);  		});  		$('div').html( str.join('<br>') );  	}  );


Ajax json php примеры Скачать ajax_jq_json2.zip

jqbook.net.ru

jQuery.getJSON() — производит запрос json-данных у сервера, методом GET, без перезагрузки страницы. Функция имеет несколько необязательных параметров.

  • url — url-адрес, по которому будет отправлен запрос.
  • data — данные, которые будут отправлены на сервер. Они должны быть представлены в форме объекта, в формате: {fName1:value1, fName2:value2, …}.
  • success (data, textStatus, jqXHR) — пользовательская функция, которая будет вызвана после ответа сервера.
    • data — данные, присланные с сервера.
    • textStatus — статус того, как был выполнен запрос.
    • jqXHR — объект jqXHR (в версиях до jquery-1.5, вместо него использовался XMLHttpRequest)

Этот метод представляет из себя альтернативу (сокращенным вариантом) использования функции $.ajax(), вызванной со следующими параметрами:

Данные отправляются через URL как часть строки запроса. Если они представляют из себя объект, то он будет преобразован в строку и закодирован для передачи через URL.

Для более полного использования можно настроить обработчик успешного завершения запроса:

Данный пример зависит от содержания JSON файла:

В нём происходит прокрутка полученных данных в цикле и создание ненумерованного списка, который впоследствии будет добавлен на страницу.

Обработчик успешного завершения запроса принимает JavaScript объект или массив, который может быть преобразован с помощью метода $.parseJSON(). Также передаётся текст статуса запроса и ответ.

Начиная с jQuery 1.5, обработчик завершения запроса принимает «jqXHR» объект (в jQuery 1.4 был объект XMLHttpRequest). Однако при использовании кросс-доменных JSONP запросов объект XHR не используется.

Начиная с версии 1.5, $.getJSON() возвращает объект jqXHR, реализующий интерфейс deferred, что позволяет задавать дополнительные обработчики. Помимо стандартных для объекта deferred методов .done(), .fail() и .then(), с помощью которых можно устанавливать обработчики, в jqXHR реализованы их копии: .success(), .error() и .complete(). Это сделано для соответствия привычным названиям методов, с помощью которых устанавливаются обработчики выполнения ajax-запросов.

Также, начиная с jQuery 1.5, мы можем использовать методы .done(), always() и fail() в любой момент, даже после определения самого запроса:

 

codernote.ru

Массив

Массив — это список упорядоченных значений. Массив в JSON обозначается квадратными скобками [].

Синтаксис:

Массив в JSON может содержать неограниченное количество значений.

Объект

Синтаксис:

Объект может содержать неограниченное количество пар имя/значения. Каждое из значений само может являться объектом или массивом. Такие объекты или массивы называются вложенными.

Литералы

Объекты и массивы в JSON являются конструкциями, а литералы непосредственно данными, которые группируются этими конструкциями.

Литералы JSON:

  • Строка;
  • Число;
  • Логическое значение;
  • Значение null.

Синтаксис:

Файл JSON должен иметь расширение .json.

Ниже приведем сравнение файлов XML и JSON bookbase.json и bookbase.xml содержащих описание книг в книжном магазине.

Аналогичный XML файл:

Обратите внимание: длинна файла bookbase.json 1457, а файла bookbase.xml 2137 символов.

Запросим содержимое нескольких тэгов файла bookbase.json из JavaScript.


Задание 1 обратитесь с помощью AJAX к файлу bookbase.json, считайте его содержимое и:

  • выведите содержимое 4-го тэга author на страницу
  • выведите содержимое 6-го, 7-го и 8-го тэга title на страницу.
  • выведите сумму содержимого 4-го, 7-го, 10-го и 14-го тэга quantity на страницу.

www.wisdomweb.ru

json_decode() и json_encode()

В языке PHP (от 5.2), поддержка JSON включена в ядро в виде функций json_decode()(декодирует JSON строку) и json_encode(), которые сами преобразуют типы данных JSON в соответствующие типы PHP и наоборот.

PHP пример работы функции json_decode

<?php  $arr = array('a' => 1, 'b' => 2);    echo json_encode($arr);  ?>

Результат

{"a":1,"b":2,"c":3,"d":4,"e":5}

PHP пример работы функции json_decode

$json = '{"a":1,"b":2}';    var_dump(json_decode($json, true));    $arr = json_decode($json, true);  echo "<br/>".$arr['a']. "<br/>".$arr['b']. "<br/>";

Результат

array(5) {   ["a"] => int(1)   ["b"] => int(2)  }  1  2

Пример работы Ajax запроса методом POST

Что мы будем делать:
Проверяем на корректность отправленные (POST-запросом AJAX) данные (данные вводятся пользователем). Если данные корректны, выводим сообщение. В ином случае делаем красную подсветку у полей. Все работает асинхронно, то есть без перезагрузки страницы. Вы можете использовать данный принцип, например, чтобы создать систему комментариев с вставкой комментариев в базу данных.

jQuery

$(document).ready(function(){   var working = false;  /* Данный флаг предотвращает отправку нескольких комментариев: */   $('form').submit(function(e){   e.preventDefault();   if(working) return false;   working = true;   $('#submit').val('Подождите..');   $('.error').removeClass("error");   $.post('submit.php',$(this).serialize(),function(msg){   /* Отправляем значения формы в submit.php: */   working = false;   $('#submit').val('Отправить');   if(msg.status)   // Если данные корректны, добавляем сообщение   {   console.log(msg.status);   $(msg.html).hide().insertBefore('form').slideDown();   }   else   {   // Если есть ошибки, проходим циклом по объекту   // msg.errors и выводим их на страницу   $.each(msg.errors,function(k,v){   $('#'+k).addClass("error");   //alert(k);   });   }   },'json');   });  });

HTML

 <form action="" method="post" >   <div>   <label for="author">   <span>Введите число</span>   <input type="text" id="intt" name="intt">   </label>   </div>   <div>   <label for="email">   <span>Введите email</span>   <input type="text" id="email" name="email" />   </label>   </div>     <input type="submit" value="Отправить" id="submit">   </form>

PHP

// принимаем данные пришедшие посредством ajax  $arr[email] = $_POST[email];  $arr[intt] = $_POST[intt];    if(filter_var($arr[email], FILTER_VALIDATE_EMAIL) && filter_var($arr[intt], FILTER_VALIDATE_INT))  {  echo json_encode(array('status'=>1,'html'=>'<div>Спасибо, ваши данные точны</div>'));  // информация возвращаемая сервером  }  else  {   if(filter_var($arr[email], FILTER_VALIDATE_EMAIL) == false)   {   $errors['email'] = 'Пожалуйста, введите имя.';   }   if(filter_var($arr[intt], FILTER_VALIDATE_INT) == false)   {   $errors['intt'] = 'Пожалуйста, введите имя.';   }    $arr = $errors;  /* Вывод сообщений об ошибке */  echo '{"status":0,"errors":'.json_encode($arr).'}';  }

dnzl.ru

Кратко об Ajax

Если вы новичок в Ajax, позвольте вкратце рассказать вам о том, что такое асинхронные запросы. Это важно знать, поскольку асинхронные запросы занимают в Ajax центральное место, а буква А в Ajax происходит от слова asynchronous.

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

Если же задача выполняется асинхронно, то вы сообщаете браузеру, что намерены выполнить определенную работу в фоновом режиме. Выражение «в фоновом режиме» звучит довольно туманно, но для браузера оно означает следующее: «Выполни это так, чтобы пользователь в течение всего времени мог взаимодействовать с документом, и сообщи мне, когда все будет сделано».

В случае Ajax вы приказываете браузеру связаться с веб-сервером и сообщить вам, когда запрос будет выполнен. Управление этой связью осуществляется с помощью функций обратного вызова (callback functions). Вы предоставляете браузеру одну или несколько функций, которые должны быть вызваны сразу же по завершении выполнения задачи. Должна быть предусмотрена функция, которая обработает успешный запрос, а кроме того, могут существовать функции, выполняющиеся в случае других исходов, например при возникновении ошибок.

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

Недостатком такого подхода является то, что он требует тщательного продумывания кода. Нельзя заранее сказать, когда именно будет выполнен асинхронный запрос, и вы не имеете права делать какие-либо предположения относительно возможного исхода запроса. Кроме того, использование функций обратного вызова приводит к созданию еще более сложного кода, который только и ждет, чтобы «наказать» программиста, неосторожно сделавшего какие-либо предположения относительно возможного исхода запроса или времени его выполнения.

Выполнение GET-запросов Ajax

Прежде всего, Ajax используется для того, чтобы выполнить HTTP-запрос GET с целью загрузки HTML-фрагмента, который можно добавить в документ. Образец документа, с которым мы будем работать, приведен ниже:

Этот код (файл test.html) аналогичен тому, который использовался в предыдущих примерах, но в нем отсутствуют элементы, описывающие отдельные виды цветочной продукции, а также элементы данных и шаблоны, с помощью которых они генерируются. Вместо этого создан отдельный файл под названием flowers.html:

Это те же элементы, которые использовались в предыдущих статьях, но они не распределены по рядам и из элементов div удален атрибут class. Эти изменения внесены исключительно для того, чтобы продемонстрировать, как осуществляется обработка элементов, загружаемых в документ. Никаких технических предпосылок, которые заставляли бы поступать именно так, нет. Обратите внимание на то, что это не полноценный HTML-документ, а всего лишь фрагмент.

Для тестирования всех приведенных ниже и в следующей статье примеров, вы должны сохранить оба этих файла на локальном сервере. Если вы еще не установили локальный сервер, рекомендую WAMP сервер EasyPHP.

Для включения этого фрагмента в основной HTML-документ мы можем воспользоваться поддержкой Ajax, предоставляемой jQuery. Возможно, вас удивляет использование такого подхода, однако мы используем его, поскольку он имитирует распространенную ситуацию, когда сложный документ или веб-приложение получают путем «сшивки» отдельных фрагментов содержимого, создаваемого различными системами.

Пример того, как это можно сделать, приведен ниже:

Здесь используется метод get(), которому передаются два аргумента. Первый из них — это URL-адрес, указывающий на документ, который мы хотим загрузить. В данном случае используется адрес flowers.html, который будет интерпретироваться как URL, заданный относительно URL-адреса, использующегося для загрузки основного документа.

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

Когда вы будете загружать документ, содержащий этот сценарий, файл flowers.html загрузится с сервера, браузер выполнит его синтаксический анализ, и полученные элементы добавятся в документ. Конечный результат представлен на рисунке:

В этом сценарии метод get() используется для загрузки HTML-страницы, однако точно так же с сервера могут быть загружены данные любой природы.

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

Обработка ответных данных сервера

Функция, выполняющаяся в случае успешного завершения запроса, принимает в качестве аргумента данные, отправленные сервером в ответ на запрос. В этом примере мы получаем содержимое файла flowers.html, представляющее собой HTML-фрагмент. Чтобы превратить этот фрагмент в объект, с которым можно работать средствами jQuery, мы передаем его функции $(), которая выполнит синтаксический анализ фрагмента и сгенерирует дерево объектов HTMLElement, как показано в примере ниже:

Как уже отмечалось, из элементов div были намеренно удалены атрибуты class. Теперь, как видите, мы восстанавливаем их с помощью стандартного метода addClass(). Передав данные функции $(), мы получаем от нее объект jQuery, с которым далее можем работать как с любым другим объектом. Мы добавляем элементы в документ с помощью методов slice() и appendTo().

Обратите внимание на то, что для выбора элементов div, сгенерированных на основе полученных от сервера данных, используется метод filter(). Дело в том, что в процессе синтаксического анализа символы перевода строки, введенные между элементами div в файле flowers.html для структурирования данных, jQuery воспринимает как текстовое содержимое и вставляет вместо них текстовые элементы. Чтобы этого избежать, необходимо либо проследить за тем, чтобы эти символы отсутствовали в запрашиваемом документе, либо удалить их, используя метод filter().

Повышение наглядности процесса загрузки

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

Теперь документ flowers.html не будет загружаться до тех пор, пока на кнопке «Ajax» не будет выполнен щелчок, причем каждый последующий щелчок также будет приводить к добавлению в документ дополнительных элементов, как показано на рисунке:

Обратите внимание на вызов метода preventDefault() для объекта Event, который передается в обработчик событий. Это делается для того, чтобы отменить выполнение браузером действий, предусмотренных по умолчанию. Поскольку элемент button содержится внутри элемента form, действием по умолчанию является отправка формы на сервер.

Получение других типов данных

Возможности метода get() не ограничиваются работой только с HTML. Он позволяет получать с сервера данные любой природы. Особый интерес для нас представляет формат JSON, предоставляющий удобные возможности для обработки данных средствами jQuery.

В свое время, когда технология Ajax еще только начинала широко внедряться, предпочтительным форматом данных считался XML, и даже буква X в аббревиатуре «Ajax» обязана своим происхождением этому формату. Я не собираюсь подробно обсуждать XML и лишь замечу, что этот язык страдает избыточностью синтаксиса, трудно читается и требует относительно больших затрат времени и ресурсов для генерации и обработки данных.

В последние годы формат XML был заметно потеснен форматом JSON (JavaScript Object Notation), отличающимся простотой и исключительной приспособленностью для работы с JavaScript-кодом (о чем говорит уже само его название). Специально для этого примера я создал файл mydata.json и сохранил его вместе с файлом test.html на веб-сервере. Содержимое файла mydata.json представлено в примере ниже:

В этом файле содержатся данные для различных видов цветочной продукции, и несложно заметить, что форма представления данных JSON совпадает с формой представления данных, встраиваемых в JavaScript-код. Это и есть одна из причин, по которым формат JSON вытеснил XML в веб-приложениях.

Для загрузки и обработки этих данных с помощью Ajax можно использовать метод get(), как показано в примере ниже (здесь мы используем шаблоны данных, вам потребуется добавить ссылку на библиотеку jquery.tmpl.js):

В этом примере файл с данными JSON запрашивается с сервера после щелчка на кнопке. Полученные данные передаются функции так, как если бы это был обычный HTML-фрагмент. Для обработки данных и генерации из них HTML-элементов используется подключаемый модуль шаблонов, а для вставки элементов в документ — методы slice() и appendTo(). Обратите внимание на то, что мы не предпринимаем никаких действий для того, чтобы преобразовать строку JSON в объект JavaScript — за нас это автоматически делает jQuery.

Некоторые веб-серверы (например Microsoft IIS 7.5) не возвращают содержимое браузеру, если не могут распознать расширение имени файла или формат данных. Чтобы этот пример работал с IIS, мне пришлось установить новое соответствие между расширением имени файла (.json) и MIME-типом данных в формате JSON (application/json). Пока я этого не сделал, веб-сервер IIS отвечал на мой запрос файла mydata.json сообщением с кодом 404 («Not Found»).

Передача данных GET-запросам

Данные могут пересылаться на сервер в составе GET-запросов, для отправки которых можно использовать методы get(), load(), getScript() и getJSON(). Соответствующий пример приведен ниже:

Предоставленные вами данные присоединяются к указанному URL-адресу в виде строки запроса. Это означает, что запрос имеет примерно следующий вид:

Данные, полученные в составе запроса, могут быть использованы сервером для уточнения содержимого, которое должно быть возвращено в ответ на запрос. Например, в приведенном запросе передана информация, относящаяся к одному из отделений интернет-магазина, которые разбросаны по нескольким странам.

Выполнение POST-запросов Ajax

Теперь, когда вы уже знаете, как получать данные с сервера, можно перейти к рассмотрению вопроса о способах отправки данных, точнее — отправки данных формы на сервер. Для решения этой задачи также предусмотрен прямой метод post(), значительно упрощающий отправку данных формы. Прежде чем перейти к рассмотрению данного метода, вы должны настроить свой сервер.

Серверный сценарий

Для этого раздела вам понадобится серверный сценарий, который будет получать данные, отправленные браузером с использованием HTTP-метода POST, выполнять простую операцию с использованием этих данных и генерировать ответ. Сценарий PHP (вы можете написать собственный сценарий для своей платформы) для этого раздела приведен в примере ниже:

Сохраните сценарий в файле phphandler.php. Этот сценарий обрабатывает данные, отправленные браузером, и генерирует ответ в формате JSON. Вообще говоря, можно было сделать так, чтобы этот сценарий возвращал HTML-данные, но формат JSON более компактен, и во многих случаях с ним проще работать.

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

Ранее формат JSON использовался нами для представления массива объектов, тогда как данный серверный сценарий возвращает одиночный объект, свойства которого соответствуют выбранным видам цветов. Свойство total содержит общее количество выбранных цветов. Должен признать, что подобного рода операции слишком просты для того, чтобы дать полное представление о возможностях обработки данных на сервере, но все же основной предмет нашего рассмотрения — Ajax, а не вопросы разработки серверных приложений.

Использование метода POST для отправки данных формы

Итак, теперь, когда вы уже имеете подготовленный сервер, можем приступить к использованию метода post() для оправки данных формы на сервер, как показано в примере ниже:

Этот пример кажется немного сложнее, чем он есть на самом деле. Мы начинаем с того, что используем метод getJSON() для получения файла mydata.json, содержащего описание цветочной продукции, после чего генерируем элементы с помощью шаблона данных и добавляем их в документ. В результате мы оказываемся на уже хорошо вам знакомой исходной позиции, которую, надеюсь, вы уже успели полюбить:

Вы видите на этом рисунке, что в некоторых текстовых полях содержатся значения, формирующие заказ. Для регистрации функции, которая будет вызываться после щелчка на кнопке, используется метод click().

Первое, что делает обработчик — вызывает метод serialize() для элемента form. Это весьма полезный метод, который последовательно обрабатывает все элементы формы и создает строку, закодированную для передачи на сервер в качестве фрагмента URL-адреса. Для введенных мною значений метод serialize() генерирует следующую строку:

Я использую здесь метод serialize(), поскольку метод post() отправляет данные в закодированном для передачи в составе URL формате. Получив объект data, созданный на основе значений элементов input, мы вызываем метод post(), чтобы инициировать Ajax-запрос.

В качестве аргументов метод post() получает URL-адрес, по которому должны быть отправлены данные, подлежащие отправке, сами данные и функцию, которая должна быть вызвана в случае успешного выполнения запроса.

В этом примере получаемый от сервера ответ передается функции processServerResponse(). Сначала мы скрываем элементы div уровня ячеек, формирующие табличную компоновку страницы с использованием стилей CSS (они относятся к классу dcell), а затем отображаем те из них, которые соответствуют свойствам объекта JSON, полученного от сервера. Кроме того, мы используем шаблон данных для генерации разметки, отображающей общее количество выбранных единиц продукции. Это все можно было бы сделать с помощью клиента, но наша цель — научиться обрабатывать данные, возвращаемые POST-запросом Ajax. Результат показан на рисунке:

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

Указание ожидаемого типа данных

При использовании методов get() и post() библиотеке jQuery приходится определять тип данных, получаемых от сервера в ответ на запрос. Данными может быть все что угодно, начиная от HTML-кода и заканчивая файлами JavaScript. Для определения типа данных библиотека jQuery использует содержащуюся в ответе информацию, и в частности — заголовок Content-Type. Как правило, этого вполне достаточно, но иногда jQuery приходится оказывать небольшую помощь. Обычно необходимость в этом возникает из-за указания сервером неверного MIME-типа в ответе.

Можно изменить информацию, поставляемую сервером, и сообщить jQuery, какой тип данных ожидается, передавая методам get() и post() дополнительную информацию. Аргумент может принимать одно из следующих значений:

  • xml
  • json
  • jsonp
  • script
  • html
  • text

В примере ниже показано, как задать ожидаемый тип данных для метода post():

Теперь, если вы удалите из серверного сценария строку, с явной установкой заголовка, пример все равно будет работать корректно:

Ловушка при работе с Ajax

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

В этом сценарии определяется переменная elems, которая используется в функции обратного вызова Ajax для сохранения результата выполнения запроса к серверу. Полученные с сервера элементы добавляются в документ с помощью методов slice() и appendTo(). Если вы выполните этот пример, то увидите, что ни один из элементов не будет добавлен в документ, и вместо этого на консоли отобразится сообщение, конкретный текст которого зависит от типа браузера. Ниже приведено сообщение, отображаемое на консоли браузера Google Chrome:

Проблема заключается в том, что инструкции, содержащиеся внутри элемента script, выполняются не в том порядке, в котором они записаны. При написании этого кода предполагался следующий порядок выполнения инструкций:

  1. Определяется переменная elems.

  2. Получаемые с сервера данные присваиваются переменной elems.

  3. Элементы извлекаются из переменной elems и добавляются в документ.

В действительности происходит следующее:

  1. Определяется переменная elems.

  2. Запускается асинхронный запрос к серверу.

  3. Элементы извлекаются из переменной elems и добавляются в документ.

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

  1. В браузер поступают данные от сервера.

  2. Данные обрабатываются и присваиваются переменной elems.

Причина появления сообщения об ошибке — вызов метода slice() для переменной в тот момент, когда она еще не содержит никаких элементов. Хуже всего то, что иногда этот код может работать правильно. Объясняется это тем, что Ajax-запрос выполняется настолько быстро, что к тому времени, когда начинается обработка переменной, в ней уже содержатся ожидаемые данные (обычно это наблюдается в тех случаях, когда данные кешируются браузером или когда между отправкой Ajax-запроса и попыткой обработки данных выполняются какие-либо сложные операции). Так что теперь, если ваш код будет вести себя подобным образом, вы уже знаете, что может быть причиной его необычного поведения.

Использование вспомогательных методов для работы с конкретными типами данных

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

Получение HTML-фрагментов

Метод load() предназначен для получения только HTML-данных, что позволяет совместить запрос HTML-фрагмента, обработку ответа от сервера для создания набора элементов и вставку этих элементов в документ в одном действии. Пример использования метода load() представлен ниже:

В этом сценарии мы вызываем метод load() для элемента, в который хотим вставить новые элементы, и передаем ему URL-адрес в качестве аргумента. Если запрос завершается успешно, а полученный от сервера ответ содержит действительный HTML-фрагмент, элементы вставляются в указанное место в документе, как показано на рисунке:

Вы видите, что все элементы из файла flowers.html добавлены в документ, как мы и хотели, но поскольку у них отсутствует атрибут class, то они не укладываются в табличную компоновку страницы, используемую в основном документе. Поэтому метод load() наиболее полезен в тех случаях, когда все элементы могут быть вставлены в одно место в документе без какой-либо дополнительной обработки.

Получение и выполнение сценариев

Метод getScript() загружает файл JavaScript, а затем выполняет содержащиеся в нем инструкции. Чтобы продемонстрировать работу этого метода, я создал файл myscript.js и сохранил его вместе с файлом test.html на своем веб-сервере. Содержимое этого файла представлено в примере ниже:

Эти инструкции генерируют три ряда элементов, описывающих цветы. Мы обошлись здесь без определения шаблонов и использовали циклы для генерации элементов (хотя, вообще говоря, следовало бы воспользоваться шаблонами данных).

Самое важное, что необходимо знать при работе со сценариям, — между инициализацией Ajax-запроса и выполнением инструкций сценария состояние документа может измениться. В примере ниже приведен сценарий из основного документа, в котором по-прежнему используется метод getScript(), но при этом, еще до завершения Ajax-запроса, модифицируется дерево DOM:

Здесь мы вызываем метод getScript() для основной функции $() и передаем ему в качестве аргумента URL-адрес файла, который хотим использовать. Если сервер способен предоставить указанный файл и этот файл содержит действительный JavaScript-код, то последний будет выполнен.

Метод getScript() можно использовать для загрузки любых сценариев, но особенно полезно использовать его для загрузки и выполнения таких сценариев, как сценарии для отслеживания статистики посещения сайтов или определения географического местоположения клиента, которые не связаны с поддержкой основной функциональности веб-приложения. Пользователя не особенно заботит, в состоянии ли мы точно определять его местоположение для ведения статистики, тогда как длительное ожидание загрузки и выполнения сценария будет действовать ему на нервы.

Используя метод getScript(), можно быстро получать запрашиваемую информацию, не доставляя пользователям неудобств, вызванных необходимостью ожидания ответа. Уточню свою мысль. Я вовсе не предлагаю вам использовать этот метод для выполнения каких-либо действий скрытно от пользователя и говорю лишь о том, что следует отодвигать на второй план загрузку и выполнение вполне законной функциональности, если она представляет для пользователей меньшую ценность, чем затрачиваемое на ее ожидание время.

В данном примере после запуска Ajax-запроса с помощью метода getScript() из документа удаляется элемент row2, для чего используется метод remove(). Данный элемент используется в файле myscript.js для вставки новых элементов. Эти элементы отбрасываются незаметным для пользователя образом, поскольку в документе селектору #row2 ничто не соответствует. Итоговый результат представлен на рисунке:

Отнеситесь к этому примеру как к одному из образцов надежного дизайна для ситуаций, в которых документ подвергается изменениям. Во всяком случае запомните, что при написании внешних сценариев JavaScript не стоит делать слишком много допущений о состоянии документа.

Получение данных в формате JSON

Для загрузки данных JSON с сервера предназначен метод getJSON(). Возможно, это наименее полезный из всех трех вспомогательных методов, поскольку он не делает с данными ничего сверх того, что делает базовый метод get().

professorweb.ru

Синтаксис JSON на примерах

Формат json обычно записывается в 2-х вариантах:

1. Последовательность значений. Например, последовательность 10, 15 и «test» в формате JSON будут выглядеть так:

  [10,15,"test"]  

2. Запись в виде пар ключ : значение. Например:

  {"ФИО":"Иванов Сергей", "Дата рождения":"09.03.1975"}  

Немного более сложный пример:

  {   "ФИО" : "Иванов Сергей",   "Адрес" : {   "Город" : "Москва",   "Улица" : "Пятницкая",   "Дом" : "35"   }  }  

PHP функции для работы с JSON-форматом

В языке php начиная с версии 5.2. есть всего 4 функции:

  • json_decode — Декодирует строку JSON (из строки json-формата получает данные)
  • json_encode — Возвращает JSON-представление данных (преобразует данные в json-строку)
  • json_last_error_msg — Возвращает строку с сообщением об ошибке последнего вызова json_encode() или json_decode()
  • json_last_error — Возвращает последнюю ошибку

В основном по-большей части, используются всего две функции: json_encode и json_decode. Не буду вдаваться в подробности их синтаксиса, подробнее можете посмотреть на php.net. Пример использования:

  $arr1 = array(0,1,2);    $json_str = json_encode($arr1);  echo $json_str; // выведет json-строку: [0,1,2]    $arr2 = json_decode($json_str);  echo $arr2[1]; // выведет: 1  

Обратите внимание: при кодировании в JSON-формат данных на русском языке, функция json_encode преобразует русские символы в юникод, т.е. заменяет их на uXXXX и таким образом, json-строка становится не читабельной для человека (но понятной для браузера). Если нужно, чтобы преобразования в юникод не происходило (например, при отладке кода), можно просто использовать опцию JSON_UNESCAPED_UNICODE.

Так же, чтобы при кодировании не добавлялись слэши для экранирования и чтобы строки с числами кодировались как числа, можно использовать JSON_UNESCAPED_SLASHES и JSON_NUMERIC_CHECK. В итоге, чтобы json-строка была читабельной для человека, сделаем, например, так:

  $arr = array(   'fio' => 'Иванов Сергей',    'age' => '32',    'vk_url' => 'https://vk.com/id11111'  );  echo json_encode($arr, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_NUMERIC_CHECK);  

Без использования этих опций строка была бы такой:

  {   "fio" : "u0418u0432u0430u043du043eu0432 u0421u0435u0440u0433u0435u0439",   "age" : "32",   "vk_url":"https://vk.com/id11111"  }  

а с использованием опций, получим читабельную строку:

  {   "fio" : "Иванов Сергей",   "age" : 32,   "vk_url" : "https://vk.com/id11111"  }  

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

  $json_str = '{ "a":1, "b":2, "c":3 }';    $obj = json_decode($json_str); // получим объект  echo $obj->a; // выведет 1    $arr = json_decode($json_str, true); // получим ассоциативный массив  echo $arr['a']; // выведет 1  

На этом рассмотрение php-функций завершу.

JavaScript функции для работы с JSON-форматом

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

  // Пример массива в JavaScript  arr = [0, 1, 2, 3];  alert( arr[1] ); // выведет 1  // Пример объекта в JavaScript  obj = {   "name": "Вася",    "age": 35,   "isAdmin": false  }   alert( obj.name ); // выведет "Вася"  

Функции JavaScript, используемые для преобразования в JSON-формат и обратно:

  • JSON.parse — декодирование JSON-строки (преобразование строки в объекты и/или массивы)
  • JSON.stringify — возвращает JSON-представление данных (преобразование объектов и/или массивов в json-строку)

Простой пример декодирования json-строки в массив с цифрами:

  str = "[0, 1, 2, 3]";  arr = JSON.parse(str);  alert( arr[1] ); // выведет 1  

Пример преобразования (сериализации) объекта в JSON-строку:

  obj = {   "name": "Вася",    "age": 35,   "isAdmin": false  }   alert( JSON.stringify(obj) ); // выведет {"name":"Вася","age":35,"isAdmin":false}  

При сериализации (преобразовании) объекта в JSON-строку, вызывается метод toJSON этого объекта, если он существует. Если метода нет, тогда перечисляются все свойства объекта. Пример преобразования объекта с методом toJSON:

  obj = {   "name": "Вася",    "age": 35,   "isAdmin": false,   toJSON: function() {   return this.age;   }  }   alert( JSON.stringify(obj) ); // выведет 35  

Обе функции JSON.parse и JSON.stringify имеют доп.параметры для уточнения правил преобразований. Не буду останавливаться на них в рамках этой статьи. Если необходимо, о них можно почитать, например, здесь: https://learn.javascript.ru/json.

Примеры практического применения JSON-формата

Собственно, лично я, применяю формат JSON в 2-х основных ситуациях:

1. Передача данных между браузером и сервером с использованием Ajax-запросов.

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

В JavaScript с помощью jQuery делаем простой ajax-запрос к серверу и выводим данные в виде таблицы в браузер:

  $.getJSON('get-info.php').success(function(data) { // ajax-запрос, данные с сервера запишутся в переменную data   htmlstr = '<table>';    for (var i=0; i<data.length; i++) { // цикл по сотрудникам   htmlstr += '<tr>';   htmlstr += '<td>' + data[i].fio + '</td>'; // первая колонка - ФИО   htmlstr += '<td>' + data[i].birthday + '</td>'; // вторая колонка - Дата рождения   htmlstr += '</tr>';   }   htmlstr = '</table>';   $('div.info').html(htmlstr); // в div с классом info выводим получившуюся таблицу с данными  });  

На сервере скрипт get-info.php к которому делается ajax-запрос, может быть, например, таким:

  $user_info = array(); // создаем массив с данными   $user_info[] = array (   'fio' => 'Иванов Сергей',   'birthday' => '09.03.1975'  );  $user_info[] = array (   'fio' => 'Петров Алексей',   'birthday' => '18.09.1983'  );  echo json_encode($user_info);  exit;  

В этом примере JSON-строка, которая была передана с сервера в браузер была такой:

  [{"fio":"Иванов Сергей","birthday":"09.03.1975"},{"fio":"Петров Алексей","birthday":"18.09.1983"}]  

Я специально не стал показывать строку в виде «дерева», т.к. она передается именно в таком виде. И как вы можете оценить, запись данных в формате JSON получилась очень компактной, а это значит, что передача этих данных от сервера к браузеру будет практически мгновенной.

2. Запись сложных структур данных в базу данных.

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

Вместо того, чтобы заводить еще одну таблицу ради 2-х настроек, можно просто в таблице со списком пользователей сделать текстовый столбец, в который помещать данные настроек пользователя. Тогда запрос обновления настроек, может например, быть таким:

  UPDATE users SET settings = '{"background-color":"#FFFFFF", "text-color":"#000000"}' WHERE user_id = 10  

В будущем, получив из таблицы users информацию, скрипт php может легко превратить их обратно в массив с настройками. Например, если переменная $user_info содержит данные, полученные по пользователю из таблицы users, получить массив с настройками очень просто:

  $settings = json_decode($user_info['settings'], true);  echo 'Цвет фона = '.$settings['background-color'];  echo 'Цвет текста = '.$settings['text-color'];  

В формате JSON, можно так же, например, записать в базу данных какие опции товаров выбрал покупатель.

  {"15":["45","47"], "18":"52"} // у опции 15 выбраны значения 45 и 47, а у опции 18 выбрано значение 52  

Впринципе, можно даже и всё содержимое корзины записать в формате JSON, например, так:

  {   "user_id" : 10,   "session_id" : "2c2l3h4ii271aojentejtdcmh3",   "products":   [   {   "product_id" : 15,   "options" : {   "15" : [45, 47],   "18" : 52   },   "quantity" : 1,   "price" : 1500   },   {   "product_id" : 16,   "options" : {   "15" : [47,48],   "18" : 51   },   "quantity" : 2,   "price" : 1000   }   ]  }  

В обычном не древовидном виде эта JSON-строка будет такой:

  {"user_id":10,"session_id":"2c2l3h4ii271aojentejtdcmh3","products":[{"product_id":15,"options":{"15":[45,47],"18":52},"quantity":1,"price":1500},{"product_id":16,"options":{"15":[47,48],"18":51},"quantity":2,"price":1000}]}  

Таким образом, как видно из примеров, в формате JSON можно хранить и передавать практически любую информацию.

www.codernotes.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.