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

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

 <!DOCTYPE html>

 <html>

   <head>

     <meta charset="utf-8">

     <title>草丛三兄弟</title>

     <link rel="stylesheet" href="style.css">

   </head>

   <body>

       <header>  </header>

       <section></section>

     <script>

     var header = document.querySelector('header');

     var section = document.querySelector('section');

     //通过 XMLHttpRequest API 获取Github上的JSON文件

     var requestURL = 'https://raw.githubusercontent.com/git0null/-json/master/caocongsanxiongdi.json';

     var request = new XMLHttpRequest();

     request.open('GET', requestURL);

     request.responseType = 'json';

     request.send();

     request.onload = function() {

       var obj = request.response;

       populateHeader(obj);

       showHeroes(obj);

     }

     function populateHeader(jsonObj) {

   var myH1 = document.createElement('h1');

   myH1.textContent = jsonObj.squadName;

   header.appendChild(myH1);

   var myH2 = document.createElement('h2');

   myH2.textContent = '成员:';

   header.appendChild(myH2);

 }

 function showHeroes(jsonObj) {

   var heroes = jsonObj.members;

   for(i = 0; i < heroes.length; i++) {

     var myArticle = document.createElement('article');

     var myH3 = document.createElement('h3');

     var p2 = document.createElement('p');

     var p3 = document.createElement('p');

     var myList = document.createElement('ul');

     myH3.textContent = heroes[i].name;

     p2.textContent = '外号：'+heroes[i].surname;

     p3.textContent = '技能:';

     var skill = heroes[i].skill;

     for(j = 0; j < skill.length; j++) {

       var listItem = document.createElement('li');

       listItem.textContent = skill[j];

       myList.appendChild(listItem);

     }

     myArticle.appendChild(myH3);

     myArticle.appendChild(p2);

     myArticle.appendChild(p3);

     myArticle.appendChild(myList);

     section.appendChild(myArticle);

   }

 }

     </script>

   </body>

 </html>

本例中JSON文件内容如下:

 {

   "squadName" : "草丛三兄弟",

   "members" : [

     {

       "name" : "盖伦",

       "surname":"草丛仑、大宝剑",

       "skill":[

         "坚韧",

         "致命打击",

         "勇气",

         "审判",

         "德玛西亚正义"

       ]

     },

     {

       "name" : "赵信",

       "surname":"菊花信",

       "skill":[

         "果决",

         "三重爪击",

         "风斩电刺",

         "无畏冲锋",

         "新月护卫"

       ]

     },

     {

       "name" : "嘉文四世",

       "surname":"周杰伦",

       "skill":[

         "战争律动",

         "巨龙撞击",

         "黄金圣盾",

         "德邦军旗",

         "天崩地裂"

       ]

     }

   ]

 }

result:

Working With JSON的更多相关文章

  1. 使用TSQL查询和更新 JSON 数据

    JSON是一个非常流行的,用于数据交换的文本数据(textual data)格式,主要用于Web和移动应用程序中.JSON 使用“键/值对”(Key:Value pair)存储数据,能够表示嵌套键值对 ...

  2. 【疯狂造轮子-iOS】JSON转Model系列之二

    [疯狂造轮子-iOS]JSON转Model系列之二 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 上一篇<[疯狂造轮子-iOS]JSON转Model系列之一> ...

  3. 【疯狂造轮子-iOS】JSON转Model系列之一

    [疯狂造轮子-iOS]JSON转Model系列之一 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 之前一直看别人的源码,虽然对自己提升比较大,但毕竟不是自己写的,很容易遗 ...

  4. Taurus.MVC 2.2 开源发布：WebAPI 功能增强（请求跨域及Json转换）

    背景: 1:有用户反馈了关于跨域请求的问题. 2:有用户反馈了参数获取的问题. 3:JsonHelper的增强. 在综合上面的条件下,有了2.2版本的更新,也因此写了此文. 开源地址: https:/ ...

  5. .NET Core系列 ： 2 、project.json 这葫芦里卖的什么药

    .NET Core系列 : 1..NET Core 环境搭建和命令行CLI入门 介绍了.NET Core环境,本文介绍.NET Core中最重要的一个配置文件project.json的相关内容.我们可 ...

  6. 一个粗心的Bug，JSON格式不规范导致AJAX错误

    一.事件回放  今天工作时碰到了一个奇怪的问题,这个问题很早很早以前也碰到过,不过没想到过这么久了竟然又栽在这里. 当时正在联调一个项目,由于后端没有提供数据接口,于是我直接本地建立了一个 json ...

  7. JSON.parse()和JSON.stringify()

    1.parse 用于从一个字符串中解析出json 对象.例如 var str='{"name":"cpf","age":"23&q ...

  8. json与JavaScript对象互换

    1,json字符串转化为JavaScript对象: 方法:JSON.parse(string) eg:var account = '{"name":"jaytan&quo ...

  9. .NET平台开源项目速览(18)C#平台JSON实体类生成器JSON C# Class Generator

    去年,我在一篇文章用原始方法解析复杂字符串,json一定要用JsonMapper么?中介绍了简单的JSON解析的问题,那种方法在当时的环境是非常方便的,因为不需要生成实体类,结构很容易解析.但随着业务 ...

  10. WebApi接口 - 响应输出xml和json

    格式化数据这东西,主要看需要的运用场景,今天和大家分享的是webapi格式化数据,这里面的例子主要是输出json和xml的格式数据,测试用例很接近实际常用情况:希望大家喜欢,也希望各位多多扫码支持和点 ...

随机推荐

  1. C#里面的事物回滚，解决同步数据插入时出现重复数据

    什么是事物回滚: 举个栗子,你在你家的银行分行取钱,取完钱数据要同步,而且可能每个分行都有一个存储这些数据的数据库,分行的这些 存取的记录都需要实时同步,如果你取完500刚好断电了,好嘛,分行可能刚记 ...

  2. 理解JVM之Java内存区域

    Java虚拟机运行时数据区分为以下几个部分: 方法区.虚拟机栈.本地方法栈.堆.程序计数器.如下图所示: 一.程序计数器 程序计数器可看作当前线程所执行的字节码行号指示器,字节码解释器工作时就是通过改 ...

  3. 【学习笔记】--- 老男孩学Python，day5 列表 元祖

    今日主要内容1. list(增删改查) 列表可以装大量的数据. 不限制数据类型. 表示方式:[] 方括号中的每一项用逗号隔开 列表和字符串一样.也有索引和切片 常用的功能: 1. 增: append( ...

  4. js-ES6学习笔记-Class（6）

    1.类相当于实例的原型,所有在类中定义的方法,都会被实例继承.如果在一个方法前,加上static关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为“静态方法”. 2.父类的静态方法,可 ...

  5. kvm 创建新虚拟机命virt-install 使用说明

    virt-install 命令说明 1.命令作用      建立(provision)新虚拟机   2.语法   virt-install [选项]... 3.说明(DESCRIPTION)   vi ...

  6. OSGI企业应用开发（六）细说Blueprint & Gemini Blueprint（一）

    上篇文章介绍了如何使用Blueprint將Spring框架整合到OSGI应用的Bundle中,从上篇文章中我们大概了解了Blueprint与Gemini Blueprint的关系,简单的说,Bluep ...

  7. MVC与单元测试实践之健身网站(二)-管理员模块

    开始动手做这个项目时,发现无法做到完全的先设计.再编码,于是决定分模块进行,从管理员模块开始设计.编码,而且接口就已经改了好几次了. 管理员模块涉及的功能有登录和后台对管理员的维护,其中也涉及前端的开 ...

  8. 一致性Hash(Consistent Hashing)原理剖析

    引入 在业务开发中,我们常把数据持久化到数据库中.如果需要读取这些数据,除了直接从数据库中读取外,为了减轻数据库的访问压力以及提高访问速度,我们更多地引入缓存来对数据进行存取.读取数据的过程一般为: ...

  9. Oracle EBS GL 会计科目报错 GL_ACCESS_SET_LEDGERS

    1.会计科目设置后,总账中找不到对应账簿                                           2.原因是新版本系统物化视图有问题,参照metalink解决方案得知原路径 ...

  10. linux访问Windows共享文件命令

    mount -o username=username,password=password,ip=10.0.0.1 //10.0.0.1/backupscm /home/package/image_vm ...