jQuery.getJSON( url, [data], [callback] )
“http://www.w3.org/TR/html4/loose.dtd“>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js“></script>
<script>
$(document).ready(function(){
$.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;
});
});
});
</script>
<style>img{ height: 100px; float: left; }</style>
</head>
<body>
<div id=”images”></div>
</body>
</html>
| url | String | |
|---|---|---|
| The URL of the page to load. | ||
| data (Optional) | Map | |
| Key/value pairs that will be sent to the server. | ||
| callback (Optional) | Function | |
A function to be executed whenever the data is loaded successfully.
function (data, textStatus) { // data will be a jsonObj this; // the options for this ajax request }
|
||
Getting JSON using jQuery is extremely straightforward. Just like $.ajax(), there is a $.getJSON() method, with a call to a file, and a function to pass the data through for parsing. The common $.each() method in jQuery can be used to traverse the “nodes” (keys) that you indicate. You could just as easily use your own for loop.
As usual, Brian includes plenty of code examples to further reinforce his techniques and provides a source code download for you to review.
You can catch both tutorials here:
jQuery and XML revisited
Parse JSON with jQuery and JavaScript
Parsing Yahoo Pipes JSON with jQuery :
/* global variables */
var descList = new Array();
var itemList = “”;
$(document).ready(function() {
var content = “”;
$.getJSON(script_path,
function(json){
if(json.count > 0) {
content = output_feed_items(json);
} else {
content = “The request did not return results.”;
}
$(”#pipes-feed-content”).html(content);
}
);
});
function output_feed_items(json) {
document.title = json.value.title;
var heading = ‘<h3>’ + json.value.title + ‘</h3>’;
for (i=0;i<json.count;i++) {
itemList += make_feed_item(json.value.items[i], i);
descList.push(make_feed_desc(json.value.items[i], i));
}
return heading + itemList;
}
function make_feed_item(item, item_id) {
return ‘<h4 id=”heading-’ + item_id + ‘”>’ +
‘<a href=”#heading-’ + item_id +
‘” onclick=”toggle_feed_desc(’ + item_id + ‘);”>’ +
item.title + ‘</a></h4>’;
}
function make_feed_desc(item, item_id) {
var desc_info = ‘<span=”item-submitted”>Published: ‘ +
item.pubDate + ‘</span>’;
desc_info += ‘ - <a href=”‘ + item.link + ‘”>Link to Article</a>’;
var desc_info = ‘<div class=”item-info”>’ + desc_info + ‘</div>’;
return ‘<div id=”desc-’ + item_id + ‘”>’ +
desc_info + item.description + ‘</div>’;
}
function toggle_feed_desc(item_id) {
var heading = ‘#heading-’ + item_id;
var item_div = ‘div#desc-’ + item_id;
if ($(item_div).html()) {
$(item_div).remove();
} else {
$(heading).after(descList[item_id]);
}
}
Publié dans ajax
