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用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
jQuery中的for循环var与let的区别
Apr 21 jQuery
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
jQuery无冲突模式详解
Jan 17 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 jQuery
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 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实现的简单网络硬盘
2015/07/29 PHP
yii数据库的查询方法
2015/12/28 PHP
thinkphp5使用无限极分类
2019/02/18 PHP
PHP5.6读写excel表格文件操作示例
2019/02/26 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
JavaScript While 循环基础教程
2007/04/05 Javascript
表单填写时用回车代替TAB的实现方法
2007/10/09 Javascript
js Date自定义函数 延迟脚本执行
2010/03/10 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
2014/12/20 Javascript
NodeJS中利用Promise来封装异步函数
2015/02/25 NodeJs
jQuery实现文本展开收缩特效
2015/06/03 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
2015/09/12 Javascript
Bootstrap table的使用方法
2016/11/02 Javascript
详解NodeJS框架express的路径映射(路由)功能及控制
2017/03/24 NodeJs
js图片查看器插件用法示例
2019/06/22 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
2019/09/23 Javascript
Node.js API详解之 Error模块用法实例分析
2020/05/14 Javascript
详谈Object.defineProperty 及实现数据双向绑定
2020/07/18 Javascript
element-ui 弹窗组件封装的步骤
2021/01/22 Javascript
如何解决django配置settings时遇到Could not import settings 'conf.local'
2014/11/18 Python
浅谈Python实现2种文件复制的方法
2018/01/19 Python
对python For 循环的三种遍历方式解析
2019/02/01 Python
python分数表示方式和写法
2019/06/26 Python
Python3 shutil(高级文件操作模块)实例用法总结
2020/02/19 Python
python是怎么被发明的
2020/06/15 Python
详解python with 上下文管理器
2020/09/02 Python
基于CSS3实现的黑色个性导航菜单效果
2015/09/14 HTML / CSS
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
美国时装品牌:Nautica(诺帝卡)
2016/08/28 全球购物
欧洲高端品牌直销店:Fashionesta
2016/08/31 全球购物
上海期货面试题
2014/01/31 面试题
个人自我鉴定怎么写
2013/10/28 职场文书
自荐信格式技巧有哪些呢
2013/11/19 职场文书
党员证明信
2015/06/19 职场文书
八一建军节主持词
2015/07/01 职场文书
MySQL 全文检索的使用示例
2021/06/07 MySQL