jQuery.getJSON()

Returns: jqXHR

Запрашивает JSON-данные у сервера методом GET.

  • version added: 1.0jQuery.getJSON( url [, data] [, success(data, textStatus, jqXHR)] )

    url
    Тип: Строка
    адрес, на который отправляется запрос. 

    data

    Тип: Объект
    данные,  отправляемые на сервер в формате map (наборы ключ:значение) или string (строка)

    success(data, textStatus, jqXHR)
    Тип: Функция
    функция, вызываемая при успешном завершении ajax-запроса. 

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

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

$.getJSON('ajax/test.json', function(data) {
 var items = [];
 $.each(data, function(key, val) {
   items.push('<li id="' + key + '">' + val + '</li>');
 });
 $('<ul/>', {
   'class': 'my-new-list',
   html: items.join('')
 }).appendTo('body');
});

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

{
 "one": "Singular sensation",
 "two": "Beady little eyes",
 "three": "Little birds pitch by my doorstep"
}

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

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

Начиная с jQuery 1.5, обработчик завершения запроса принимает "jqXHR" object (в 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() в любой момент, даже после определения самого запроса:

var jqxhr = $.getJSON( "example.json", function() {
 console.log( "success" );
})
.done(function() { console.log( "second success" ); })
.fail(function() { console.log( "error" ); })
.always(function() { console.log( "complete" ); });
// тут другой код...
// другой метод, который запустится после завершения запроса
jqxhr.complete(function() { console.log( "second complete" );

Примеры

Пример: загрузить 4 последних изображения с помощью Flickr JSONP API.

<!DOCTYPE html>
<html>
<head>
 <style>img{ height: 100px; float: left; }</style>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
 <div id="images">
</div>
<script>
(function() {
 var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
 $.getJSON( flickerAPI, {
   tags: "mount rainier",
   tagmode: "any",
   format: "json"
 })
 .done(function( data ) {
   $.each( data.items, function( i, item ) {
     $( "<img/>" ).attr( "src", item.media.m ).appendTo( "#images" );
     if ( i === 3 ) {
       return false;
     }
   });
 });
})();
</script>
</body>
</html>

Пример: загрузить JSON-данные из test.js и получить доступ к полю name.

$.getJSON( "test.js", function( json ) {
  console.log( "JSON Data: " + json.users[3].name );
});

Пример: загрузить JSON-данные из test.js и получить доступ к полю name. Вывести ошибку в консоль, если она произойдёт.

$.getJSON( "test.js", { name: "John", time: "2pm" } )
.done(function( json ) {
 console.log( "JSON Data: " + json.users[3].name );
})
.fail(function( jqxhr, textStatus, error ) {
 var err = textStatus + ', ' + error;
 console.log( "Request Failed: " + err);
});
^ Наверх ^