jQuery jQuery.getJSON(url, data, callback)

Slyweb

На разработку сайта! Скидки 50%!

Поиск функций jQuery

Характеристика функции

[Функция] jQuery.getJSON(url, [data], [callback])

Раздел "Ajax"

Функция загружает JSON данные используя GET запрос.

Параметры

jQuery.getJSON(url, [data], [callback])

1.0

url: URL адрес загружаемой страницы

data: объект, который будет отправлен серверу

callback: функция выполяемая, когда данные успешно загружены

 function (data, textStatus) { 
 // данные только могут быть json объектом
 // другие рагументы
 }

Описание

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

Данный метод (getJSON) является аналогом следующего метода ajax():

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

Пример наиболее подходящий для точного объяснения метода getJSON

$.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(test.json) следующего типа:

{
  "one": "Значение объекта 1",
  "two": "Значение объекта 2",
  "three": "Значение объекта 3"
}

В данном случае каждый элемент объкета json при помощь метода $.each(), убдут выведены в список, где ключ объекта json будет идентификатором (id), а занчение объекта - текстом элемента li.

Обратите внимание, что при нанличии оишибки в структуре json объета метод не вызовет соответствующий обработчик. Формат json данных является строго структурированным, все строчные данные json объекта должны быть записаны в дваойных кавычках. Параметр textStatus объекта jqXHR всегда будет undefined.

Возможно, Вам будет интересно прочитать статьи о jQuery:

Примеры

Пример:

Загрузить 4 самых новых рисунка с Flickr JSONP API.

Пример
Весь код

"jQuery"

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 == 4 ) return false;
          });
        });

"HTML"

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

"CSS"

img{ height: 100px; float: left; }

"Живой пример jQuery"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://slyweb.ru/css/jqueryiframe.css" 
rel="stylesheet" type="text/css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){

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 == 4 ) return false;
          });
        });

  });
</script>

</head>
<body class="iframe">


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


</body>
</html>


<style>

img{ height: 100px; float: left; }

</style>

Пример:

Загрузить данные JSON из test.js и получить имя JSON данных.

"jQuery"

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

Пример:

Загрузить JSON из test.js, совместно передавая дополнительные данные, и получить имя из возвращённых JSON данных.

"jQuery"

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

Пример:

Лист результатов опроса pages.php в HTML как массив. Автор Manuel Gonzalez.

"jQuery"

var id=$("#id").attr("value");
  jQuery.getJSON("pages.php",{id:id},dates);
function dates(datos)
{
	
 $("#list").html("Name:"+datos[1].name+"<br>"+"Last Name:"+datos[1].lastname+"<br>"+"Address:"+datos[1].address);
}

Метод появился в jQuery 1.0

Официальная страница метода - http://api.jquery.com/jQuery.getJSON/

Форма для комментариев

Версия jQuery 1.4.2 Документ создан 2010-08-21

Ошибки и опечатки
Предложения и жалобы
Поддержка сайта

Александр Ермаков. Хостинг - www.pwstudio.org

Руководство jQuery 1.4.2

Плагины jQuery UI

Эффекты

Возможно, Вам будет интересно прочитать статьи о jQuery: