Начиная с 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.
Пример:
Загрузить 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://test-drupal.ru/themes/slyweb/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);
}
