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 相关文章推荐
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
JQuery实现定时刷新功能代码
May 09 jQuery
jQuery异步提交表单实例
May 30 jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
JQuery的加载和选择器用法简单示例
May 13 jQuery
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
jquery实现手风琴案例
May 04 jQuery
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
jQuery实现简单飞机大战
Jul 05 jQuery
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 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实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
php检测图片木马多进制编程实践
2013/04/11 PHP
PHP转换文件夹下所有文件编码的实现代码
2013/06/06 PHP
PHP获取浏览器信息类和客户端地理位置的2个方法
2014/04/24 PHP
php session的锁和并发
2016/01/22 PHP
使用laravel和ajax实现整个页面无刷新的操作方法
2019/10/03 PHP
心扬JS分页函数代码
2010/09/10 Javascript
jquery 缓存问题的几个解决方法
2013/11/11 Javascript
JQuery的$命名冲突详细解析
2013/12/28 Javascript
js中直接声明一个对象的方法
2014/08/10 Javascript
js生成验证码并直接在前端判断
2015/05/15 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
2015/12/18 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
2017/02/05 Javascript
详解nodeJS中读写文件方法的区别
2017/03/06 NodeJs
老生常谈js中0到底是 true 还是 false
2017/03/08 Javascript
JS库之Waypoints的用法详解
2017/09/13 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
2018/08/29 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
2019/04/10 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
Python简单定义与使用字典dict的方法示例
2017/07/25 Python
Python爬虫实例_城市公交网络站点数据的爬取方法
2018/01/10 Python
python输出结果刷新及进度条的实现操作
2020/07/13 Python
大学生求职自荐信
2013/12/12 职场文书
秘书行业自我鉴定范文
2013/12/30 职场文书
公务员试用期满考核材料
2014/05/22 职场文书
社区志愿者活动总结
2014/06/26 职场文书
企业爱岗敬业演讲稿
2014/09/04 职场文书
七一建党日演讲稿
2014/09/05 职场文书
国际贸易本科毕业生求职信
2014/09/26 职场文书
鲁迅故里导游词
2015/02/05 职场文书
聋哑人盗窃罪辩护词
2015/05/21 职场文书
win10安装配置nginx的过程
2021/03/31 Servers
Python如何利用正则表达式爬取网页信息及图片
2021/04/17 Python
MySQL数据库如何使用Shell进行连接
2022/04/12 MySQL
Vue操作Storage本地化存储
2022/04/29 Vue.js