jQuery中讀取json文件

時間 2019-12-05

標籤 jquery 讀取 json 文件欄目 JQuery 简体版

原文原文鏈接

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

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

url：加載的頁面地址html

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

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

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

[服務器

{函數

"name":"張國立",ui

"sex":"男",url

"email":"zhangguoli@123.com"

{

"name":"張鐵林",

"sex":"男",

"email":"zhangtieli@123.com"

{

"name":"鄧婕",

"sex":"女",

"email":"zhenjie@123.com"

}

]

2. 其次建一個頁面用於獲取JSON文件裏的用戶信息數據，並顯示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>getJSON獲取數據</title>

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

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

</style>

$(function(){

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

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

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

var strHtml = "123";//存儲數據的變量

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

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

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

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

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

strHtml += "<hr>"

})

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

})

</script>

</head>

<body>

</div>

</div>

</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。