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

函數原型：

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

url：加載的頁面地址

data: 可選項，發送到服務器的數據，格式是key/value

callback:可選項，加載成功后執行的回調函數

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

[

{

"name":"張國立",

"sex":"男",

"email":"zhangguoli@jbxue.com"

},

{

"name":"張鐵林",

"sex":"男",

"email":"zhangtieli@jbxue.com"

},

{

"name":"鄧婕",

"sex":"女",

"email":"denjie@jbxue.com"

}

]

2、創建一個頁面，用于獲取JSON文件中用戶的信息數據，并顯示出來。

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

復制代碼 代碼示例:

getJSON獲取數據_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";//存儲數據的變量

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

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

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

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

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

strHtml += "

---

"

})

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

})

})

})

總結

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

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