Ajax запрос JSON-данных
jQuery.getJSON() – производит запрос json-данных у сервера, методом GET, без перезагрузки страницы. Функция имеет несколько необязательных параметров.
jQuery.getJSON( url [, data ] [, success ] )
- url — url-адрес, по которому будет отправлен запрос.
- data — данные, которые будут отправлены на сервер. Они должны быть представлены в форме объекта, в формате: {fName1:value1, fName2:value2, …}.
- success (data, textStatus, jqXHR) — пользовательская функция, которая будет вызвана после ответа сервера.
- data — данные, присланные с сервера.
- textStatus — статус того, как был выполнен запрос.
- jqXHR — объект jqXHR (в версиях до jquery-1.5, вместо него использовался XMLHttpRequest)
Этот метод представляет из себя альтернативу (сокращенным вариантом) использования функции $.ajax(), вызванной со следующими параметрами:
$.ajax({ dataType: "json", url: url, data: data, success: success });
Данные отправляются через 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": "Первый элемент списка", "two": "Второй элемент списка", "three": "Третий элемент списка" }
В нём происходит прокрутка полученных данных в цикле и создание ненумерованного списка, который впоследствии будет добавлен на страницу.
Обработчик успешного завершения запроса принимает 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() в любой момент, даже после определения самого запроса:
var jqxhr = $.getJSON( "example.json", function() { console.log( "Данные отправлены" ); }) .done(function() { console.log( "Данные отправлены (второй вариант сообщения)" ); }) .fail(function() { console.log( "Ошибка" ); }) .always(function() { console.log( "Отправка завершена" ); }); // любой другой код ... // Установим еще один обработчик успешного выполнения jqxhr.complete(function() { console.log( "Отправка завершена (второй вариант сообщения)" ); });