JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

那么如何实现HTML显示外部JSON数据呢？下面我就教大家方法。

一、制作JSON文件，复制下面代码，然后保存为information.json。

[

{

"name":"莫愁",

"sex":"男",

"email":"1450694407@qq.com",

"url":"./img/tx1.jpg"

},

{

"name":"张三",

"sex":"男",

"email":"zhangsan@123.com",

"url":"./img/tx2.jpg"

},

{

"name":"李四",

"sex":"男",

"email":"lisi@123.com",

"url":"./img/tx3.jpg"

},

{

"name":"王五",

"sex":"男",

"email":"wangwu@123.com",

"url":"./img/tx4.jpg"

}

]

二、写HTML，根据json格式，我们这里增加5个div框来装4个信息。

Insert infromation here

.p1{

font-size: 14px;

color: #000;

}

.p2{

font-size: 12px;

color: #b0b0b0;

}

.p3{

font-size: 14px;

color: #ff5f19;

}

.product{

width:100%;

position: relative;

margin: 20px 0 5px 0;

height: 100px;

background: #fafafa;

}

.img{

width: 100px;

height: 100px;

float: left;

margin-right: 20px;

}

.p{

display:inline-block;

float:left;

width:50%;

margin-top:6px;

font-family: Microsoft YaHei;

}

.p1{

margin-top:16px;

}

三、请求数据，这里使用jq库来操作，以POST请求本目录下的information.json文件。

$(function(){

$.ajax({

type: "POST",//请求方式

url: "information.json",//地址，就是json文件的请求路径

dataType: "json",//数据类型可以为 text xml json script jsonp

success: function(result){//返回的参数就是 action里面所有的有get和set方法的参数

addBox(result);

}

});

});

四、处理信息，因为json数据不只一个，使用jq的each方法来处理。

function addBox(result){

//result是一个集合,所以需要先遍历

$.each(result,function(index,obj){

$("#box").append("

");

});

}

效果图：

完整代码：

jsonjqhtml.rar 解压密码：www.mochoublog.com