jQuery访问json文件中数据的方法示例_json文件制作html网页资源-CSDN文库

63 浏览量 2020-12-08 18:37:45 上传评论收藏 62KB PDF 举报

本文实例讲述了jQuery访问json文件中数据的方法。分享给大家供大家参考，具体如下：有时候我们可能需要用到json文件存储数据，然后通过前台语言直接进行访问。首先是json文件： { "管道": [ { "ElementId": "标识号", "GISID": "GISID", "Label": "编号", "StartNodeID":"起始节点ID", "EndNodeID":"终止节点ID", "StartNodeLabel":"起始节点编号", "EndNodeLabel":"终止节点编号", "Physical_PipeDiameter" 在本文中，我们将深入探讨如何使用jQuery访问JSON文件中的数据，这对于前端开发人员来说是一个常见的需求。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它易于人阅读和编写，同时也易于机器解析和生成。jQuery是一个强大的JavaScript库，提供了方便的方法来处理JSON数据。我们需要一个JSON文件，例如`CriteriaQuery.json`，它包含多个对象数组，如“管道”、“节点”、“阀门”、“水表”和“消火栓”。每个数组中的对象都有各自的属性，如“ElementId”、“GISID”、“Label”等，这些属性用于描述特定实体的信息。在jQuery中，我们通常使用`$.getJSON()`方法来异步加载JSON文件。这是一个Ajax请求，它将从服务器获取JSON数据，并将其转换为JavaScript对象。下面是一个示例代码片段： ```html <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 += "<p>" + o + " : " + info[o] + "</p>"; } $jsontip.append(strHtml); strHtml = ""; // 重置字符串 }); }); }); }); </script> </head> <body> <button id="btn">加载JSON数据</button> <div id="jsonTip"></div> </body> </html> ``` 这段代码定义了一个按钮，当点击按钮时，会触发`$.getJSON()`方法加载JSON文件。当数据加载完成后，`$.each()`函数用于遍历“管道”数组中的每个对象，`for...in`循环则用于遍历每个对象的所有属性。生成的HTML字符串会被添加到页面上的一个指定元素（`#jsonTip`）中，以便用户查看和理解数据。需要注意的是，`$.getJSON()`中的URL参数应指向JSON文件的路径。如果文件与HTML在同一目录下，则直接写文件名即可；若不在同一目录，需要提供相对或绝对路径。此外，确保JSON文件格式正确，符合JSON规范。例如，键必须用双引号包围，属性值可以是字符串、数字、对象、数组、布尔值或null。在JavaScript中，可以使用`JSON.parse()`方法将JSON字符串转换为JavaScript对象，但`$.getJSON()`已经帮我们完成了这个过程。 jQuery提供了简单且直观的方法来访问和处理JSON数据。通过`$.getJSON()`，我们可以轻松地从服务器获取JSON数据并动态更新页面内容。这个例子展示了如何解析和显示JSON文件中的“管道”数据，同样的方法也可以应用于其他数组，例如“节点”、“阀门”等。理解这一过程对于前端开发人员来说至关重要，因为它允许灵活的数据交互和丰富的用户体验。

资源详情

资源评论

资源推荐

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":"安装日期"

}],

"消火栓": [{

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

评论收藏

内容反馈

weixin_38629920

粉丝: 6
资源: 914

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

评论0

最新资源

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

评论0

解决JavaWeb读取本地json文件以及乱码的问题

Jquery遍历Json数据的方法

jquery处理json数据实例分析

jQuery使用ajax方法解析返回的json数据功能示例

jQuery中使用Ajax获取JSON格式数据示例代码.pdf

实例讲解jquery与json的结合

jQuery读取json数据

jQuery ajax读取json文件内容

jquery.json-viewer示例

使用JQuery实现从JSON对象转换为form提交数据

用jquery解析JSON数据的方法20110227

jQuery ajax读取本地json文件的实例

JQuery以JSON方式提交数据到服务端示例代码

jQuery查看json格式数据插件

jquery解析json格式数据的方法(对象、字符串)

Ajax使用JSON数据格式案例

JQuery操作json的例子

jquery-json使用

js与jQuery实现获取table中的数据并拼成json字符串操作示例.docx

Jquery.json.js

jquery,json,php综合示例

jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例

这是一套jquery案例

jquery 小例子

使用jquery的方式通过ajax处理json格式的数据

JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码

json数据jquery异步示例

一个页面实现Ajax效果的增删改查-JQuery+Json版

JQuery 获取json数据$.getJSON方法的实例代码

jQuery使用getJSON方法获取json数据完整示例

最新资源