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

 

Оставить комментарий

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