jQuery ajax - метод getJSON()

jQuery Ajax справочник

Пример

Получение JSON данных с помощью AJAX запроса и вывод результатов:

$("button").click(function(){
  $.getJSON("demo_ajax_json.js",function(result){
    $.each(result, function(i, field){
      $("div").append(field + " ");
    );
  );
);

Попробуйте сами

Определение и использование

Загрузка JSON данных через HTTP GET запрос.

В jQuery 1.2 вы можете загружать JSON данные из других доменов, используя формат JSONP с обратными вызовами, например "myurl?callback=?". jQuery автоматически заменяет ? на правильное имя функции для выполнения обратного вызова. Замечание: код, который находится после этой строки, будет выполняться до выполнения обратного вызова.

Синтаксис

jQuery.getJSON(url,data,success(data,status,xhr)})
Параметры Описание
url Обязательное. Определяет URL, на который отправляется запрос.
data Доступно. Определяет данные, отправляемые на сервер.
success(data,status,xhr)}

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

Дополнительные параметры:

  • response - Включает данные, полученные от запроса
  • status - Включает состояние запроса
  • xhr - Включает объект XMLHttpRequest

Подробное описание

Эта функция является сокращенной Ajax функцией, эквивалентной:

$.ajax({
  url: url,
  data: data,
  success: callback,
  dataType: json
);

Данные, отправляемые на сервер, могут быть добавлены в URL после знака вопроса. Если data Если значение параметра является объектом (ассоциативным массивом), то перед добавлением в URL он будет преобразован в строку и закодирован в URL.

Передается в callback Возврат данных может быть объектом JavaScript или массивом, определенным в структуре JSON, и может быть проанализирован с помощью метода $.parseJSON().

Пример

Загрузить JSON данные из test.js и показать данные поля name в JSON данных:

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

Более примеров

Пример 1

Загрузить 4 самых новых изображения о кошках из JSONP API Flickr:

HTML код:

<div id="images"></div>

jQuery код:


$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?
tags=cat&tagmode=any&format=json&jsoncallback=?", function(data){
  $.each(data.items, function(i,item){
    $("<img/>").attr("src", item.media.m).appendTo("#images");
    if ( i == 3 ) return false;
  );
);

Пример 2

Загрузить JSON данные из test.js, добавить параметры, показать данные поля name в JSON данных:

$.getJSON("test.js", { name: "Bill", time: "2pm" }, function(json){
  alert("JSON Data: " + json.users[3].name);
);

jQuery Ajax справочник