jQuery访问json文件中数据的方法示例
本文实例讲述了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.jb51.net/code/htmljsrun测试上述代码运行效果。
ps:关于json操作,这里再为大家推荐几款比较实用的json在线工具供大家参考使用:
在线json代码检验、检验、美化、格式化工具:
json在线格式化工具:
在线xml/json互相转换工具:
json代码在线格式化/美化/压缩/编辑/转换工具:
在线json压缩/转义工具:
更多关于jquery相关内容还可查看本站专题:《jquery操作json数据技巧汇总》、《jquery常用插件及用法总结》、《jquery扩展技巧总结》及《jquery选择器用法总结》
希望本文所述对大家jquery程序设计有所帮助。
上一篇: 恭王府为什么成了和珅的府邸?一座恭王府,半部清朝史!
下一篇: 个人博客搭建具体操作