快捷導(dǎo)航

jQuery訪問json文件中數(shù)據(jù)的方法示例

更新時間：2019年01月28日 11:05:04 作者：kaleid_liner

這篇文章主要介紹了jQuery訪問json文件中數(shù)據(jù)的方法,結(jié)合實(shí)力形式分析了jQuery事件響應(yīng)及json文件的加載、讀取、遍歷等相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery訪問json文件中數(shù)據(jù)的方法。分享給大家供大家參考，具體如下：

有時候我們可能需要用到j(luò)son文件存儲數(shù)據(jù)，然后通過前臺直接進(jìn)行訪問。

首先是json文件：

{
 "管道": [
  {
  "ElementId": "標(biāo)識號",
  "GISID": "GISID",
  "Label": "編號",
  "StartNodeID":"起始節(jié)點(diǎn)ID",
  "EndNodeID":"終止節(jié)點(diǎn)ID",
  "StartNodeLabel":"起始節(jié)點(diǎn)編號",
  "EndNodeLabel":"終止節(jié)點(diǎn)編號",
  "Physical_PipeDiameter":"管徑",
  "Physical_PipeMaterialID":"管材",
  "Physical_HazenWilliamsC":"海曾威廉C值",
  "Physical_Length":"管長",
  "Physical_MinorLossCoefficient":"局部阻力系數(shù)",
  "Physical_InstallationYear":"鋪設(shè)年代",
  "Physical_Address":"地址",
  "District":"營銷公司",
  "DMA":"計量區(qū)",
  "Zone":"行政區(qū)",
  "flow":"當(dāng)前流量",
  "velocity":"當(dāng)前流速",
  "headloss":"當(dāng)前水頭損失"
  }],
 "節(jié)點(diǎn)": [{
  "ElementId": "標(biāo)識號",
  "GISID": "GISID",
  "Label": "編號",
  "Physical_Elevation":"地面高程",
  "Physical_Depth":"埋深",
  "Physical_Address":"地址",
  "District":"營銷公司",
  "DMA":"計量區(qū)",
  "Zone":"行政區(qū)",
  "hydraulicGrade":"水壓標(biāo)高",
  "pressure":"自由水壓",
  "demand":"節(jié)點(diǎn)流量",
  "cl":"余氯濃度",
  "age":"水齡",
  "source":"供水水源"
 }],
 "閥門": [{
  "ElementId": "標(biāo)識號",
  "GISID": "GISID",
  "Label": "編號",
  "Physical_Elevation":"地面高程",
  "Physical_Depth":"埋深",
  "Physical_Diameter":"口徑",
  "Physical_Status":"閥門狀態(tài)",
  "Physical_Address":"地址",
  "District":"營銷公司",
  "DMA":"計量區(qū)",
  "Zone":"行政區(qū)",
  "Physical_InstallationYear":"安裝年代"
 }],
 "水表": [{
  "DIAMETER":"口徑",
  "CALIBER": "表徑",
  "MATERIAL": "材質(zhì)",
  "DEPTH":"埋深",
  "HEIGHT":"地面高程",
  "ADDR":"地址",
  "WATREGID": "表號",
  "USERNAME":"用戶名",
  "JUNCTION":"接口類型",
  "DISTRICT":"行政區(qū)",
  "MEASUREIN":"營銷公司",
  "FINISHDATE":"安裝日期"
 }],
 "消火栓": [{
  "ElementId": "標(biāo)識號",
  "GISID": "GISID",
  "Label": "編號",
  "Physical_Elevation":"地面高程",
  "Physical_Depth":"埋深",
  "Physical_Address":"地址",
  "District":"營銷公司",
  "DMA":"計量區(qū)",
  "Zone":"行政區(qū)",
  "Physical_Diameter":"口徑",
  "Physical_Type":"樣式"
 }]
}

創(chuàng)建CriteriaQuery.json文件，文件內(nèi)容如上。

前臺代碼：

<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="獲取數(shù)據(jù)" 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放在同一個目錄下。

運(yùn)行代碼，點(diǎn)擊獲取數(shù)據(jù)按鈕，就能夠在頁面上看到遍歷json文件所得到的“管道”的所有信息。當(dāng)然，也可以通過key來獲取到j(luò)son文件的value，即