json文件是一種輕量級(jí)的數(shù)據(jù)交互格式。一般在jquery中使用getJSON()方法讀取。

函數(shù)原型：

$.getJSON(url,[data],[callback])

url：加載的頁(yè)面地址

data: 可選項(xiàng)，發(fā)送到服務(wù)器的數(shù)據(jù)，格式是key/value

callback:可選項(xiàng)，加載成功后執(zhí)行的回調(diào)函數(shù)

1、首先，建一個(gè)JSON格式的文件userinfo.json 保存用戶信息。

[

{

"name":"張國(guó)立",

"sex":"男",

"email":"zhangguoli@jbxue.com"

},

{

"name":"張鐵林",

"sex":"男",

"email":"zhangtieli@jbxue.com"

},

{

"name":"鄧婕",

"sex":"女",

"email":"denjie@jbxue.com"

}

]

2、創(chuàng)建一個(gè)頁(yè)面，用于獲取JSON文件中用戶的信息數(shù)據(jù)，并顯示出來(lái)。

注意，需要引入外部jquery文件，本例中為：jquery-1.8.2.min.js。

復(fù)制代碼 代碼示例:

getJSON獲取數(shù)據(jù)_www.jbxue.com

#divframe{ border:1px solid #999; width:500px; margin:0 auto;}

.loadTitle{ background:#CCC; height:30px;}

$(function(){

$("#btn").click(function(){

$.getJSON("js/userinfo.json",function(data){

var $jsontip = $("#jsonTip");

var strHtml = "123";//存儲(chǔ)數(shù)據(jù)的變量

$jsontip.empty();//清空內(nèi)容

$.each(data,function(infoIndex,info){

strHtml += "姓名："+info["name"]+"
";

strHtml += "性別："+info["sex"]+"
";

strHtml += "郵箱："+info["email"]+"
";

strHtml += "

---

"

})

$jsontip.html(strHtml);//顯示處理后的數(shù)據(jù)

})

})

})

總結(jié)

以上是生活随笔為你收集整理的jquery读取json文件然后赋值给html,Jquery读取json文件的代码举例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。