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表单验证(简单)
May 23 jQuery
jQuery实现全选、反选和不选功能
Aug 16 jQuery
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
jQuery实现弹出层效果
Dec 10 jQuery
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
jQuery实现影院选座订座效果
Apr 13 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
PHP开发规范手册之PHP代码规范详解
2011/01/13 PHP
PHP socket 模拟POST 请求实例代码
2016/07/18 PHP
php对象工厂类完整示例
2018/08/09 PHP
jQuery编写widget的一些技巧分享
2010/10/28 Javascript
jquery中选择块并改变属性值的方法
2013/07/31 Javascript
js仿百度登录页实现拖动窗口效果
2016/03/11 Javascript
jQuery如何获取动态添加的元素
2016/06/24 Javascript
简单实现轮播图效果的实例
2016/07/15 Javascript
深入理解js generator数据类型
2016/08/16 Javascript
SpringMVC简单整合Angular2的示例
2017/07/31 Javascript
node下使用UglifyJS压缩合并JS文件的方法
2018/03/07 Javascript
React Native基础入门之初步使用Flexbox布局
2018/07/02 Javascript
详解JavaScript的变量
2019/04/04 Javascript
jQuery擦除插件eraser使用方法详解
2020/01/11 jQuery
JS函数本身的作用域实例分析
2020/03/16 Javascript
微信小程序吸底区域适配iPhoneX的实现
2020/04/09 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
2020/10/13 Javascript
Python修改Excel数据的实例代码
2013/11/01 Python
用实例分析Python中method的参数传递过程
2015/04/02 Python
python删除过期文件的方法
2015/05/29 Python
python实现微信发送邮件关闭电脑功能
2018/02/22 Python
Python爬虫抓取代理IP并检验可用性的实例
2018/05/07 Python
pygame游戏之旅 python和pygame安装教程
2018/11/20 Python
如何分离django中的媒体、静态文件和网页
2019/11/12 Python
python3将变量写入SQL语句的实现方式
2020/03/02 Python
英国时尚和家居用品零售商:Matalan
2021/02/28 全球购物
军训生自我鉴定范文
2013/12/27 职场文书
个人简历中的自我评价怎么写
2014/01/26 职场文书
大学辅导员事迹材料
2014/02/05 职场文书
出纳试用期自我鉴定
2014/04/07 职场文书
心理健康活动总结
2014/04/30 职场文书
工资收入证明样本(5篇)
2014/09/16 职场文书
英文慰问信范文
2015/03/24 职场文书
小学工作总结2015
2015/05/04 职场文书
工作调动申请报告
2015/05/18 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书