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を読み込むサンプルその2。
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); } }); });