jQuery访问json文件中数据的方法示例


Posted in jQuery onJanuary 28, 2019

本文实例讲述了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.3water.com/code/HtmlJsRun测试上述代码运行效果。

jQuery 相关文章推荐
基于jquery实现二级联动效果
Mar 30 jQuery
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
jQuery常用选择器详解
Jul 17 jQuery
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 29 jQuery
jquery分页优化操作实例分析
Aug 23 jQuery
jquery实现聊天机器人
Feb 08 jQuery
jQuery实现简单聊天室
Feb 08 jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 #jQuery
jQuery实现合并表格单元格中相同行操作示例
Jan 28 #jQuery
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 #jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 #jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 #jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 #jQuery
jQuery实现表格的增、删、改操作示例
Jan 27 #jQuery
You might like
Symfony2之session与cookie用法小结
2016/03/18 PHP
jQuery.each()用法分享
2012/07/31 Javascript
在javascript中关于节点内容加强
2013/04/11 Javascript
javascript 通用loading动画效果实例代码
2014/01/14 Javascript
详细探究ES6之Proxy代理
2016/07/22 Javascript
js 自带的 map() 方法全面了解
2016/08/16 Javascript
老生常谈JQuery data方法的使用
2016/09/09 Javascript
前端框架Vue.js中Directive知识详解
2016/09/12 Javascript
微信小程序(三):网络请求
2017/01/13 Javascript
nodejs 实现钉钉ISV接入的加密解密方法
2017/01/16 NodeJs
Linux使用Node.js建立访问静态网页的服务实例详解
2017/03/21 Javascript
JavaScript运动框架 链式运动到完美运动(五)
2017/05/18 Javascript
深入理解基于vue-cli的vuex配置
2017/07/24 Javascript
在Mac下彻底卸载node和npm的方法
2018/05/16 Javascript
解决vue select当前value没有更新到vue对象属性的问题
2018/08/30 Javascript
如何利用JavaScript编写更好的条件语句详解
2020/08/10 Javascript
JavaScript array常用方法代码实例详解
2020/09/02 Javascript
[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南
2016/06/25 DOTA
python查看模块安装位置的方法
2018/10/16 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
python 使用poster模块进行http方式的文件传输到服务器的方法
2019/01/15 Python
numpy.linspace函数具体使用详解
2019/05/27 Python
python语言基本语句用法总结
2019/06/11 Python
详解解决Python memory error的问题(四种解决方案)
2019/08/08 Python
Python 内置变量和函数的查看及说明介绍
2019/12/25 Python
Django 路由层URLconf的实现
2019/12/30 Python
详解python itertools功能
2020/02/07 Python
Python基于codecs模块实现文件读写案例解析
2020/05/11 Python
澳大利亚婴儿喂养品牌:Cherub Baby
2018/11/01 全球购物
怎么样写好简历中的自我评价
2013/10/25 职场文书
大学毕业生自我鉴定
2013/11/05 职场文书
2014两会学习心得:时代的发展
2014/03/17 职场文书
团委书记的竞聘演讲稿
2014/04/24 职场文书
学校组织向国旗敬礼活动方案(中小学适用)
2014/09/27 职场文书
卡特教练观后感
2015/06/08 职场文书
redis复制有可能碰到的问题汇总
2022/04/03 Redis