溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了jQuery訪問json文件中數據的方法。分享給大家供大家參考，具體如下：
有時候我們可能需要用到json文件存儲數據，然后通過前臺語言直接進行訪問。
首先是json文件：
{
"管道": [
{
"ElementId": "標識號",
"GISID": "GISID",
"Label": "編號",
"StartNodeID":"起始節點ID",
"EndNodeID":"終止節點ID",
"StartNodeLabel":"起始節點編號",
"EndNodeLabel":"終止節點編號",
"Physical_PipeDiameter":"管徑",
"Physical_PipeMaterialID":"管材",
"Physical_HazenWilliamsC":"海曾威廉C值",
"Physical_Length":"管長",
"Physical_MinorLossCoefficient":"局部阻力系數",
"Physical_InstallationYear":"鋪設年代",
"Physical_Address":"地址",
"District":"營銷公司",
"DMA":"計量區",
"Zone":"行政區",
"flow":"當前流量",
"velocity":"當前流速",
"headloss":"當前水頭損失"
}],
"節點": [{
"ElementId": "標識號",
"GISID": "GISID",
"Label": "編號",
"Physical_Elevation":"地面高程",
"Physical_Depth":"埋深",
"Physical_Address":"地址",
"District":"營銷公司",
"DMA":"計量區",
"Zone":"行政區",
"hydraulicGrade":"水壓標高",
"pressure":"自由水壓",
"demand":"節點流量",
"cl":"余氯濃度",
"age":"水齡",
"source":"供水水源"
}],
"閥門": [{
"ElementId": "標識號",
"GISID": "GISID",
"Label": "編號",
"Physical_Elevation":"地面高程",
"Physical_Depth":"埋深",
"Physical_Diameter":"口徑",
"Physical_Status":"閥門狀態",
"Physical_Address":"地址",
"District":"營銷公司",
"DMA":"計量區",
"Zone":"行政區",
"Physical_InstallationYear":"安裝年代"
}],
"水表": [{
"DIAMETER":"口徑",
"CALIBER": "表徑",
"MATERIAL": "材質",
"DEPTH":"埋深",
"HEIGHT":"地面高程",
"ADDR":"地址",
"WATREGID": "表號",
"USERNAME":"用戶名",
"JUNCTION":"接口類型",
"DISTRICT":"行政區",
"MEASUREIN":"營銷公司",
"FINISHDATE":"安裝日期"
}],
"消火栓": [{
"ElementId": "標識號",
"GISID": "GISID",
"Label": "編號",
"Physical_Elevation":"地面高程",
"Physical_Depth":"埋深",
"Physical_Address":"地址",
"District":"營銷公司",
"DMA":"計量區",
"Zone":"行政區",
"Physical_Diameter":"口徑",
"Physical_Type":"樣式"
}]
}
創建CriteriaQuery.json文件，文件內容如上。
前臺代碼：
<html>
<head>
<meta charset="GBK"/>
<title>jQuery訪問json</title>
<script type="text/javascript" src="https://libs.baidu.com/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(function (){
$("#btn").click(function(){
$.getJSON("CriteriaQuery.json",function(data){
var $jsontip = $("#jsonTip");
var strHtml = "";
$jsontip.empty();
$.each(data.管道,function(infoIndex,info){
for(var o in info){
strHtml +=info[o];
}
//strHtml +=info["ElementId"];
});
$jsontip.html(strHtml);
})
})
})
</script>
</head>
<body>
<div id="divframe">
<div class="loadTitle">
<input type="button" value="獲取數據" id="btn"/>
</div>
<div id="jsonTip">
</div>
</div>
</body>
</html>
我這里的jquery用的1.4.0版本的js文件，即https://libs.baidu.com/jquery/1.4.0/jquery.min.js
json文件與html放在同一個目錄下。
運行代碼，點擊獲取數據按鈕，就能夠在頁面上看到遍歷json文件所得到的“管道”的所有信息。當然，也可以通過key來獲取到json文件的value，即
strHtml +=info["ElementId"];
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
PS：關于json操作，這里再為大家推薦幾款比較實用的json在線工具供大家參考使用：
在線JSON代碼檢驗、檢驗、美化、格式化工具：
http://tools.jb51.net/code/json
JSON在線格式化工具：
http://tools.jb51.net/code/jsonformat
在線XML/JSON互相轉換工具：
http://tools.jb51.net/code/xmljson
json代碼在線格式化/美化/壓縮/編輯/轉換工具：
http://tools.jb51.net/code/jsoncodeformat
在線json壓縮/轉義工具：
http://tools.jb51.net/code/json_yasuo_trans
更多關于jQuery相關內容還可查看本站專題：《jQuery操作json數據技巧匯總》、《jQuery常用插件及用法總結》、《jQuery擴展技巧總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
