HTML-readJSON

最新推荐文章于 2023-11-27 00:00:32 发布

littleSYao

最新推荐文章于 2023-11-27 00:00:32 发布

阅读量151

点赞数

分类专栏： HTML 文章标签： HTML

本文链接：https://blog.csdn.net/qq_45538481/article/details/99705488

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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>

littleSYao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML-readJSON

HTML-readJSONJSON对象及JSON数组的引用方式差异两种获取值的方式item[“name”]及item.nameJSON文件[{ "tasksess":"task1", "search":[{ "ref":{ "srcid":"src1", "range":"14 139 92 334", "degree":"0.9", "offset":"...
复制链接

扫一扫