html访问json字段,HTML如何获取JSON的数据并对其操作
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的数据并对其操作的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 网关设备和通信协议
- 下一篇： win7没有语音识别怎么办|win7系统