Working With JSON

JavaScript对象表示法（JSON）是用于将结构化数据表示为JavaScript对象的标准格式，通常用于在网站上表示和传输数据（例如从服务器向客户端发送一些数据，因此可以将其显示在网页上）。 JSON是一种按照JavaScript对象语法的数据格式,你可以把 JavaScript 对象原原本本的写入 JSON 数据——字符串，数字，数组，布尔还有其它的字面值对象。虽然它是基于 JavaScript 语法，但它独立于JavaScript。

下面是一个在Javascript中使用远端JSON的示例：

 1 <!DOCTYPE html>
 2
 3 <html>
 4
 5   <head>
 6
 7     <meta charset="utf-8">
 8
 9     <title>草丛三兄弟</title>
10
11     <link rel="stylesheet" href="style.css">
12
13   </head>
14   <body>
15       <header>  </header>
16       <section></section>
17
18     <script>
19
20     var header = document.querySelector('header');
21
22     var section = document.querySelector('section');
23
24     //通过 XMLHttpRequest API 获取Github上的JSON文件
25     var requestURL = 'https://raw.githubusercontent.com/git0null/-json/master/caocongsanxiongdi.json';
26     var request = new XMLHttpRequest();
27     request.open('GET', requestURL);
28     request.responseType = 'json';
29     request.send();
30
31     request.onload = function() {
32       var obj = request.response;
33       populateHeader(obj);
34       showHeroes(obj);
35     }
36
37     function populateHeader(jsonObj) {
38   var myH1 = document.createElement('h1');
39   myH1.textContent = jsonObj.squadName;
40   header.appendChild(myH1);
41
42   var myH2 = document.createElement('h2');
43   myH2.textContent = '成员:';
44   header.appendChild(myH2);
45 }
46 function showHeroes(jsonObj) {
47   var heroes = jsonObj.members;
48
49   for(i = 0; i < heroes.length; i++) {
50     var myArticle = document.createElement('article');
51     var myH3 = document.createElement('h3');
52     var p2 = document.createElement('p');
53     var p3 = document.createElement('p');
54     var myList = document.createElement('ul');
55
56     myH3.textContent = heroes[i].name;
57     p2.textContent = '外号：'+heroes[i].surname;
58     p3.textContent = '技能:';
59     var skill = heroes[i].skill;
60     for(j = 0; j < skill.length; j++) {
61       var listItem = document.createElement('li');
62       listItem.textContent = skill[j];
63       myList.appendChild(listItem);
64     }
65     myArticle.appendChild(myH3);
66     myArticle.appendChild(p2);
67     myArticle.appendChild(p3);
68     myArticle.appendChild(myList);
69     section.appendChild(myArticle);
70   }
71 }
72
73     </script>
74
75   </body>
76
77 </html>

本例中JSON文件内容如下:

 1 {
 2   "squadName" : "草丛三兄弟",
 3   "members" : [
 4     {
 5       "name" : "盖伦",
 6       "surname":"草丛仑、大宝剑",
 7       "skill":[
 8         "坚韧",
 9         "致命打击",
10         "勇气",
11         "审判",
12         "德玛西亚正义"
13       ]
14     },
15     {
16       "name" : "赵信",
17       "surname":"菊花信",
18       "skill":[
19         "果决",
20         "三重爪击",
21         "风斩电刺",
22         "无畏冲锋",
23         "新月护卫"
24       ]
25     },
26     {
27       "name" : "嘉文四世",
28       "surname":"周杰伦",
29       "skill":[
30         "战争律动",
31         "巨龙撞击",
32         "黄金圣盾",
33         "德邦军旗",
34         "天崩地裂"
35       ]
36     }
37   ]
38 }

result:

转载于:https://www.cnblogs.com/hzhqiang/p/9975092.html

Working With JSON相关推荐

【golang程序包推荐分享】分享亿点点golang json操作及myJsonMarshal程序包开发的踩坑经历 :)
目录[阅读时间:约5分钟] 一.概述 1.Json的作用 2.Go官方 encoding/json 包 3. golang json的主要操作二.Json Marshal:将数据编码成json字符串 ...
Go 知识点（04）— 结构体字段转 json格式 tag 标签的作用
我们知道在 Go 语言中无论是变量.常量还是函数,对于首字母大小写有不同的处理. 首字母大写,标志着该字段或者函数是能导出的,也就是可以被其它包所能访问的: 首字母小写,标志着该字段是私有的,只能在本 ...
VS Code 配置调试参数、launch.json 配置文件属性、task.json 变量替换、自动保存并格式化、空格和制表符、函数调用关系、文件搜索和全局搜索、
1. 生成配置参数对于大多数的调试都需要在当前项目目录下创建一个 lanch.json 文件,位置是在当前项目目录下生成一个 .vscode 的隐藏文件夹,在里面放置一些配置内容,比如:settin ...
Python 标准库之 json
1. josn 定义 JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式.JSON的数据格式其实就是python里面的字典格式,里面可以包含 ...
python中如何对复杂的json数据快速查找key对应的value值（使用JsonSearch包）
前言之前在实际的项目研发中,需要对一些复杂的json数据进行取值操作,由于json数据的层级很深,所以经常取值的代码会变成类似这样: value = data['store']['book'][0] ...
数据库里存json数据
需求: 查询上个月每个人各个插件的总加分汇总为一个json存储到一个字段里查询上个月每个组织机构插件的各个插件的总加分汇总为一个json存储到一个字段里流程: 查询后返回结果是一个List集合,每 ...
http传输json文件_python
https://cloud.tencent.com/developer/article/1571365 http传输图片 https://www.cnblogs.com/jruing/p/122156 ...
python：Json模块dumps、loads、dump、load介绍
20210831 https://www.cnblogs.com/bigtreei/p/10466518.html json dump dumps 区别 python:Json模块dumps.load ...
dataframe 转json
20210810 字符串转换为字典的时候,如果没有引号会报找不到这个名称字符串类型变字典本身含有字典的括号列表里面本身要是字典类型才能通过此方法把列表转换为dataframe # 格式检查 ...
Json文件解析（下
Json文件解析(下) 代码地址:https://github.com/nlohmann/json 从STL容器转换任何序列容器(std::array,std::vector,std::deque, ...

Working With JSON

Working With JSON相关推荐

最新文章

热门文章