jquery解析html json数据,jQuery解析json数据

JSON是JavaScript Object Notation的缩写，是基于JavaScript的数据格式，非常易于使用，得到浏览器的广泛支持。JSON是基于键/值对构建的，冒号用于分隔键和它的值，逗号用于分隔每个数据对，所有的键和字符串都被封装在双引号中，所有数据被包含在大括号中，可以使用中括号与大括号在JSON中嵌套数组与对象。

因为JSON数据格式是基于JavaScript的，可以直接读取，只需要知道其中的数据结构和目标键。JSON数据在JavaScript中是作为一个Object来处理的，可以把通过构造一个符合JSON格式的字符串，然后使用JSON.parse()方法或jQuery中的parseJSON()函数把这个符合格式的字符串转换为JSON对象；当然，也可以使用为JSON对象各个键赋值的方法构造JSON对象。

JSON数据可以作为文件格式异步加载，使用的方法为：

$.getJSON("regiona.json",function(data){......});

然后就可以使用jQuery的each()函数遍历数据data：

$.each(data.sales.region,function(k,v){

在each()循环中同时提供JSON中的键k和值v，得到数据后就可以用来构建DOM，进一步可以将获取的数据在canvas中显示为图表，如柱状图。示例：

$(document).ready(function(){

var theChart=document=document.getElementById('chart');

var chartHeight=400;;

var theWidth=75;

var theSpace=100;

var theX=0;

var theY=0;

var theFills=['orange','blue','red','green'];

var i=0;

if(theChart.getContext){

var theContext=theChart.getContext('2d');

$.getJSON("region.json",function(data){;

$.each(data.sales.region,function(k,v){

var theTerritory=v.territory;

var theHeight=v.parseInt(v.amount.replace(/,/g,''))/1000;

var theY=chartHeight-theHeight;

var theX=theX+theSpace;

theContext.fillStyle=theFills[i];

theContext.fillRect(theX,thY,theWidth,theHeight);

theContext.fillStyle='black';

theContext.font='12pt Arial';

theContext.fillText(theTerritory,theX,theY-20);

++i;

});

});

}

});