HTML-readJSON

最新推荐文章于 2024-05-29 10:13:53 发布

原创最新推荐文章于 2024-05-29 10:13:53 发布 · 193 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML

HTML 专栏收录该内容

4 篇文章

订阅专栏

本文深入探讨了JSON对象和数组的引用方式，对比了item[“name”]与item.name的区别，通过实例展示了如何使用jQuery从JSON文件中读取并解析数据，包括任务会话、设备ID、图片路径等关键信息，提供了两种不同的读取方法：$.getJSON和$.ajax。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML-readJSON

JSON对象及JSON数组的引用方式差异
两种获取值的方式item[“name”]及item.name
JSON文件

[
{
 "tasksess":"task1",
 "search":[{
  "ref":{
   "srcid":"src1",
   "range":"14 139 92 334",
   "degree":"0.9",
   "offset":"00:00:05"
   },
  "devid":"dev1",
  "dstpic":"pic1"
 }],
 "result":"done"
},{
 "tasksess":"task2",
 "search":[{
  "ref":{
   "srcid":"src2",
   "range":"14 139 92 334",
   "degree":"0.9",
   "offset":"00:00:06"
   },
  "devid":"dev2",
  "dstpic":"pic2"
 }],
 "result":"none"
}
]

jquery读取代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>jqueryJSON</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
 var Ajax=function(){
  $.getJSON("objarrJSON.json",function(data){
   $.each(data,function(i,item){
    $("#disp").append("<h3>"+item["tasksess"]+"</h3>");
    $("#disp").append("<p>devid:"+item["search"][0]["devid"]+"</p>");
    $("#disp").append("<p>dstpic:"+item.search[0].dstpic+"</p>");
    $("#disp").append("<p>src:"+item.search[0].ref["srcid"]+"</p>");
    $("#disp").append("<p>offset:"+item.search[0].ref.offset+"</p>");
    $("#disp").append("<p>result:"+item.result+"</p>");
   });
  });
 }
</script>
</head>
<body>
 <input type="button" value="ajaxsubmit" onclick="Ajax();" />
 <div id="disp"></div>
</body>
</html>

效果
读取JSON文件
ajax读取代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>ajaxJSON</title>
<script type="text/javascript" src="jquery.js"></script>
 <script>
$(function () {
    $.ajax({
      type: "POST",
      dataType: "json",
      url: "objarrJSON.json",
      success: function (result) {
        $.each(result,function(i,item){
    $("#disp").append("<h3>"+item["tasksess"]+"</h3>");
    $("#disp").append("<p>devid:"+item["search"][0]["devid"]+"</p>");
    $("#disp").append("<p>dstpic:"+item.search[0].dstpic+"</p>");
    $("#disp").append("<p>src:"+item.search[0].ref["srcid"]+"</p>");
    $("#disp").append("<p>offset:"+item.search[0].ref.offset+"</p>");
    $("#disp").append("<p>result:"+item.result+"</p>");
   });
      }
    });
});
</script>
</head>
<body>
 <div id="disp"></div>
</body>
</html>