初学JSON的一个小例子。

大意就是将读取JSON文件，将数据写入一个表格。
下面是实际效果图：

附：由于URL链接失效，所以就没有写成一个图片框。

部分JSON数据 { "ListContents" : [ { "GroupCount" : "2", "GroupInfo" : [ { "BrandID" : "1", "MainBrandName" : "奥迪", "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/1.png" }, { "BrandID" : "57", "MainBrandName" : "阿斯顿·马丁", "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/57.png" } ], "PinYin" : "A" },

JSON数据

HTML部分

很简单，就是一个DIV包裹着一个TABLE。

<div> <table > <tr> <td>BrandID</td><td>MainBrandName</td><td>imgURL</td> </tr> </table> </div>

CSS部分只是做了一个简单的居中

-铺垫
为了之后代码的简介，这里提取了一些方法实现

//通过ID获取标签元素 function $(idValue){ return document.getElementById(idValue); } //封装创建ELEMENT的方法 function createElement(elementName){ return document.createElement(elementName); } //封装创建TEXTNODE的方法 function createTextNode(elementValue){ return document.createTextNode(elementValue); } 重点

你可以这样写，一个方法就行。

$.ajax({ type : "get", async:false, url : "http://app.example.com/base/json.do?sid=1494&busiId=101", dataType : "jsonp",//jsonp数据类型 jsonp: "jsonpCallback",//服务端用于接收callback调用的function名的参数 success : function(data){ $("#myID").text("Result:"+data.result) }, error:function(){ alert('fail'); } });

也可以像这样

创建一个函数返回AJAX对象

function ajaxFn(method,url,data,successCallBackFn,failCallBackFn) { //创建AJAX对象 var xhr; if(window.XMLHttpRequest){ xhr=new XMLHttpRequest(); }else if(window.ActiveXObject){ //IE版本的创建方式 var versions=["Msxml2.XMLhttp","Mircrosoft.XMLHTTP"]; for(var version in versions){ try{ xhr=new ActiveXObject(version); break; }catch(e){ console.log(e); alert("ERROR"); } } }else{ throw new Erro("浏览器不支持AJAX"); } //打开连接发送请求 if(method=="GET"||method=="get") { //利用AJAX GET请求会有缓存 //为了避免每一次访问的路径不一样，可以在URL后添加随机数会有缓存 xhr.open(method, url+"?" + data +"?rand=" + Math.random(), true); xhr.send(null); }else if(method=="POST"||method=="post"){ xhr.open(method, url, true); //POST请求需要设置请求头 xhr.setRequestHeader("content-type", "application/x-www-form-urlencode"); //发送请求 xhr.send(data); }else { console.log("请求方式不正确"); } //请求响应结果 xhr.onreadystatechange=function(){ if(xhr.readyState==4){ if(xhr.status==200){ //调用回调函数 successCallBackFn(xhr.responseText); }else{ //失败 failCallBackFn("FAIL失败！"); } } }; return xhr; }

下面是对应成功和失败的函数：

//AJAX返回函数成功 function successCallBackFn(returnValue) { //把JSON字符串转换成JS对象 var carsdata = JSON.parse(returnValue); //alert(carsdata.ListCount); //获取DIV元素 var div = $("container"); var NODES = carsdata.ListContents; for(var nodes in NODES){ //创建一个TABLE var table=createElement("table"); table.setAttribute("border","1"); //创建THEAD var thead=createElement("thead"); var theadNode=createTextNode(NODES[nodes].PinYin); //添加THEAD到TABLE thead.appendChild(theadNode); table.appendChild(thead); //添加节点 var cars= NODES[nodes].GroupInfo; for( var car in cars){ //创建一个TR var tr=createElement("tr"); //创建三个TD var td1 = createElement("td"); var textnode1 = createTextNode(cars[car].BrandID); td1.appendChild(textnode1); var td2 = createElement("td"); var textnode2 = createTextNode(cars[car].MainBrandName); td2.appendChild(textnode2); var td3 = createElement("td"); var textnode3 = createTextNode(cars[car].imgURL); td3.appendChild(textnode3); //将三个TD添加到TR tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); table.appendChild(tr); } //将TABLE添加到DIV中 div.appendChild(table); } } //AJAX返回函数成功 function failCallBackFn(returnValue){ alert(returnValue); } 工具类 /* 定义对象EventUtil element:给某个元素添加事件 eventType:事件类型 handler:具体实现的函数 */ var EventUtil={ //添加事件监听 addHandler:function(element,eventType,handler){ //三种实现 if(window.addEventListener){ //IE9或以上 element.addEventListener(eventType,handler,false); }else if(window.attachEvent){ //IE8或以下 //注意这里的eventType加上了on element.attachEvent("on"+eventType,handler); }else{ element["on"+eventType]=handler; } }, //移除事件监听 removeHandler:function(element,eventType,handler){ if(window.removeEventListener){ element.removeEventListener(eventType,handler,false); }else if(window.detachEvent){ element.detachEvent("on"+eventType,handler); }else{ element["on"+eventType]=null; } } }; 调用 EventUtil.addHandler(window, "load", function(){ ajaxFn("GET", "../js/car.json",null, successCallBackFn, failCallBackFn); });

全部代码