Получение данных JSON. Метод getJSON

Ранее мы увидели, что мы можем использовать метод get для получения данных в формате json. Однако библиотека jQuery также предоставляет специальный метод getJSON. Этот метод отправляет на сервер GET-запрос и в ответ получает данные json.

Этот метод принимает следующие параметры:

• url: обязательный параметр, содержащий адрес ресурса, к которому будет обращаться запрос

• data: необязательный параметр, содержащий простой объект javascript или строку, которые будут отправлены на сервер вместе с запросом

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

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

Допустим, на сервере у нас есть следующий файл countries.json, который содержит перечисление стран в формате json:

{
	"Великобритания": 1,
	"Китай": 2,
	"Россия": 3,
	"США": 4,
	"Франция": 5
}

Добавим на страницу выпадающий список (элемент select) и загрузим в него данные из этого файла:

<select id="countries">
	<option disabled>Выберите страну</option>
</select>
<script type="text/javascript">
$(function(){
	$.getJSON('countries.json', function(data) {
				$.each(data, function(key, val) {
					$('#countries').append('<option value="' + val + '">' + key + '</option>');
				});
	});
});
</script>

В качестве значения параметра url используется название файла json. Так как приходящие данные представляют собой набор, то мы можем пройтись по ним в цикле each и применить к ним функцию обработки.

Обрабатывающая функция вызывается для каждого элемента в наборе и принимает два параметра: название данных или ключ (key) и значение (val). То есть в строке "Россия": 3 "Россия" - это ключ, а 3 - значение.

В данном случае у нас структура данных довольно проста. Теперь посмотрим на использование данных с более сложной структурой. Например, у нас определен такой файл users.json:

{
	"users": [{
		"id" : 1,
        "name": "Bill Gates",
		"age": 43
    }, {
        "id" : 2,
        "name": "Sergey Brin",
		"age": 33
    }, {
        "id" : 3,
        "name": "Larry Page",
		"age": 34
    }]
}

Попробуем вывести его в табличку на странице:

<table id="users">
	<tr><td>Id</td><td>Имя</td><td>Возраст</td><tr>
</table>
<script type="text/javascript">
$(function(){
	$.getJSON('users.json', function(data) {
			for(var i=0;i<data.users.length;i++){
				$('#users').append('<tr><td>' + data.users[i].id + '</td><td>' + data.users[i].name + 
				'</td><td>' + data.users[i].age + '</td><tr>');
			}
	});
});
</script>

Используя названия свойств объектов json, мы можем получить к ним доступ (например, data.users[i].age) и тем самым вывести их значения на страницу.