jQueryを使ってJSONを読み込むサンプルです。
getJSON関数を利用します。
jQuery(function(){
var jsonPath = '';
$.getJSON(jsonPath,function(json){
for (var i=0;i < json.rank.length;i++){
if(i < 5){
$('#rank_body').append('<ul id=rnk_n'+i+'></ul>');
var item = '#rank_body ul#rnk_n'+i;
$(item).append('<li class="num"><img/></li>');
$(item).append('<li class="photo"><a><img/></a></li>');
$(item+' .photo img').attr('src','http:'+json.rank[i].img80);
}
}
});
});
jQueryを使ってJSONを読み込むサンプルその２。
ajax関数を利用します。
jQuery(function(){
var jsonPath = '';
$.ajax({
url: jsonPath,
cache: false,
success: function(json){
//json2 = JSON.stringify(json);
//var arrList = JSON.parse(json2);
for (var i = 0;i < json.rank.length;i++){
if(i < 5){
$('#rank_body').append('<ul id=rnk_n'+i+'></ul>');
var item = '#rank_body ul#rnk_n'+i;
$(item).append('<li class="num"><img/></li>');
$(item).append('<li class="photo"><a><img/></a></li>');
$(item+' .photo img').attr('src','http:'+json.rank[i].img80);
}
}
}
});
});
XDomainRequest,XMLHttpRequestのサンプル。
jQueryを使わないでJSONを読み込みます。
IE8,9ではXDomainRequestを利用。
XMLHttpRequestが対応していれば利用。
jQuery(function(){
var jsonPath = '';
$(function() {
var xhr=window.XDomainRequest?new XDomainRequest:new XMLHttpRequest;
try{
xhr.onload=function(){
var json = $.parseJSON(xhr.responseText);
for (var i = 0;i < json.rank.length;i++){
if(i < 5){
$('#rank_body').append('<ul id=rnk_n'+i+'></ul>');
var item = '#rank_body ul#rnk_n'+i;
$(item).append('<li class="num"><img/></li>');
$(item).append('<li class="photo"><a><img/></a></li>');
$(item+' .photo img').attr('src','http:'+json.rank[i].img80);
}
}
};
xhr.open("GET",jsonPath);
xhr.send();
}catch(e){
alert(e.message);
}
});
});
