用途
新着
履歴
分類

jQuery JSONの読み込み

jQuery JSONの読み込み

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);
    }
});
});
公開 2019-08-03 12:18:27
更新 2020-04-12 21:45:42
このページの二次元コード
jQuery JSONの読み込み

人気のサンプル

search -  category -  about
© 2024 kipure
Top