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("

"+

//獲得圖片地址

"

"+

//獲得名字

"

"+obj['name']+""+

//獲得性別

"

"+obj['sex']+""+

//獲得郵箱地址

"

"+obj['email']+""+

"

");

});

}

效果圖：

完整代碼：

jsonjqhtml.rar 解壓密碼：www.mochoublog.com

總結

以上是生活随笔為你收集整理的html访问json字段,HTML如何获取JSON的数据并对其操作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。