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( "Отправка завершена (второй вариант сообщения)" );
});