一、什么是Json

JSON的全称是”JavaScript Object Notation”，意思是JavaScript对象表示法，它是一种基于文本，独立于语言的轻量级数据交换格式。XML也是一种数据交换格式，为什么没有选择XML呢？因为XML虽然可以作为跨平台的数据交换格式，但是在JS(JavaScript的简写)中处理XML非常不方便，同时XML标记比数据多，增加了交换产生的流量，而JSON没有附加的任何标记，在JS中可作为对象处理，所以我们更倾向于选择JSON来交换数据。这篇文章主要从以下几个方面来说明JSON。

示例：

<html>

<body>

<h2>在 JavaScript 中创建 JSON 对象</h2>

<p>

Name: <span id="jname"></span><br />

Age: <span id="jage"></span><br />

Address: <span id="jstreet"></span><br />

Phone: <span id="jphone"></span><br />

</p>

<script type="text/javascript">

var JSONObject= {

"name":"Bill Gates",

"street":"Fifth Avenue New York 666",

"age":56,

"phone":"555 1234567"};

document.getElementById("jname").innerHTML=JSONObject.name

document.getElementById("jage").innerHTML=JSONObject.age

document.getElementById("jstreet").innerHTML=JSONObject.street

document.getElementById("jphone").innerHTML=JSONObject.phone

</script>

</body>

</html>

运行结果：

 

二、JSON的两种结构

JSON有两种表示结构，对象和数组。

对象结构以”{”大括号开始，以”}”大括号结束。中间部分由0或多个以”，”分隔的”key(关键字)/value(值)”对构成，关键字和值之间以”：”分隔，语法结构如代码。

{

    key1:value1,

    key2:value2,

    ...

}

其中关键字是字符串，而值可以是字符串，数值，true,false,null,对象或数组

数组结构以”[”开始，”]”结束。中间由0或多个以”，”分隔的值列表组成，语法结构如代码。

[

    {

        key1:value1,

        key2:value2

    },

    {

         key3:value3,

         key4:value4

    }

]

 

三、在JS中如何使用Json

JSON是JS的一个子集，所以可以在JS中轻松地读，写JSON。读和写JSON都有两种方法，分别是利用”.”操作符和“[key]”的方式。

我们首先定义一个JSON对象，代码如下。

var obj = {

            1: "value1",

            "2": "value2",

            count: 3,

            person: [ //数组结构JSON对象，可以嵌套使用

                        {

                         id: 1,

                         name: "张三"

                     },

                     {

                         id: 2,

                         name: "李四"

                     }

                   ],

            object: { //对象结构JSON对象

                  id: 1,

                msg: "对象里的对象"

            }

        };

 

从JS中读取数据：

function ReadJSON() {

    alert(obj.1); //会报语法错误，可以用alert(obj["1"]);说明数字最好不要做关键字

    alert(obj.2); //同上

    alert(obj.person[0].name); //或者alert(obj.person[0]["name"])

    alert(obj.object.msg); //或者alert(obj.object["msg"])

}

 

向JSON中写数据

function Add() {

    //往JSON对象中增加了一条记录

    obj.sex= "男" //或者obj["sex"]="男"

}

 

修改JSON中的数据

function Update() {

     obj.count = 10; //或obj["count"]=10

}

 

删除JSON中的数据

function Delete() {

    delete obj.count;

}

 

遍历JSON对象

function Traversal() {

    for (var c in obj) {

        console.log(c + ":", obj[c]);

    }

}

Json 简易教程的更多相关文章

  1. JavaScript简易教程（转）

    原文:http://www.cnblogs.com/yanhaijing/p/3685304.html 这是我所知道的最完整最简洁的JavaScript基础教程. 这篇文章带你尽快走进JavaScri ...

  2. MetaProducts Offline Explorer使用简易教程

    MetaProducts Offline Explorer使用简易教程 by windtrace  20170419 最近想下载一个网站上的内容打包成chm文件,以便离线浏览,webzip太长时间不更 ...

  3. 移动开发之【微信小程序】的原理与权限问题以及相关的简易教程

    这几天圈子里到处都在传播着这样一个东西,微信公众平台提供了一种新的开放能力,开发者可以快速开发一个小程序,取名曰:微信公众平台-小程序 据说取代移动开发安卓和苹果,那这个东东究竟是干吗用的?但很多人觉 ...

  4. Ocelot简易教程（七）之配置文件数据库存储插件源码解析

    作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/9852711.html 上篇文章给大家分享了如何集成我写的一个Ocelot扩展插件把Ocelot的配置存储 ...

  5. Ocelot简易教程（六）之重写配置文件存储方式并优化响应数据

    本来这篇文章在昨天晚上就能发布的,悲剧的是写了两三千字的文章居然没保存,结果我懵逼了.今天重新来写这篇文章.今天我们就一起来探讨下如何重写Ocelot配置文件的存储方式以及获取方式. 作者:依乐祝 原 ...

  6. Ocelot简易教程（五）之集成IdentityServer认证以及授权

    Ocelot简易教程目录 Ocelot简易教程(一)之Ocelot是什么 Ocelot简易教程(二)之快速开始1 Ocelot简易教程(二)之快速开始2 Ocelot简易教程(三)之主要特性及路由详解 ...

  7. Ocelot简易教程（四）之请求聚合以及服务发现

    上篇文章给大家讲解了Ocelot的一些特性并对路由进行了详细的介绍,今天呢就大家一起来学习下Ocelot的请求聚合以及服务发现功能.希望能对大家有所帮助. 作者:依乐祝 原文地址:https://ww ...

  8. Ocelot简易教程（三）之主要特性及路由详解

    作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/9664977.html 上篇<Ocelot简易教程(二)之快速开始2>教大家如何快速跑起来一个 ...

  9. Ocelot简易教程（二）之快速开始2

    为什么这篇的标题叫"Ocelot简易教程(二)之快速开始2"呢,因为很多朋友跟我说上一篇" Ocelot简易教程(二)之快速开始1"内容太少了,只是简单介绍Oc ...

随机推荐

  1. 洛谷P1392 取数 [堆]

    题目传送门 取数 题目描述 在一个n行m列的数阵中,你须在每一行取一个数(共n个数),并将它们相加得到一个和.对于给定的数阵,请你输出和前k小的取数方法. 输入输出格式 输入格式: 第一行,三个数n, ...

  2. ReentrantLock和ReentrantReadWriteLock对比

    本文系作者原创,转载请注明:https://www.cnblogs.com/yanfei1819/p/10314533.html ReentrantLock 一.简介 ReentrantLock重入锁 ...

  3. 洛谷——P1109 学生分组

    P1109 学生分组 题目描述 有N组学生,给出初始时每组中的学生个数,再给出每组学生人数的上界R和下界L(L<=R),每次你可以在某组中选出一个学生把他安排到另外一组中,问最少要多少次才可以使 ...

  4. logstash日志写到es，按照时间来进行切割，生成索引配置

    配置如下: es创建索引使用: logstash-chat-proxy-nginx-access-* logstash-chat-proxy-nginx-error-*

  5. 排序小记【2】对 struct 的排序

    有了前面的内容,对于一般的排序已经没有问题了,但是有时候排序的要求可能会有点刁... 举个简单的例子,应该是NOIP2009的分数线划定,差不多算是一个比较高级的排序(吧). 多关键字排序(?) 我一 ...

  6. 初见Python<2>:列表和元组

      1.在python中,最基本的数据结构是序列,序列中每一个元素被分配一个序号,即元素的位置,称为索引.索引从0开始,-1表示倒数第一个元素,-2表示倒数第二个元素,因此既可以是从前到后开始对元素进 ...

  7. JZYZOJ1454 NOIP2015 D2T3_运输计划 二分 差分数组 lca tarjan 树链剖分

    http://172.20.6.3/Problem_Show.asp?id=1454 从这道题我充分认识到我的脑子里好多水orz. 如果知道了这个要用二分和差分写,就没什么思考上的难点了(屁咧你写了一 ...

  8. [P2698][USACO12MAR]花盆Flowerpot

    Link: P2698 传送门 Solution: 对于可行区间$[L,R]$,随着$L$的递增$R$不会递减 因此可以使用尺取法来解决此题:不断向右移动左右指针,复杂度保持线性 同时为了维护区间内的 ...

  9. 【Kruskal】Slim Span

    [Uva1395]Slim Span 题目略…… 试题分析:codevs1001舒适的路线上加一个判一下连通性就好,顺便把除改成减 代码: #include<iostream> #incl ...

  10. ubuntu中使用apt-get install 安装的软件的一些目录所在地

    apt-get 所下载的用于安装的软件包,在 /var/cache/apt/archives中.如果执行过 apt-get clean ,那么原始下载的包就找不到了. 1.下载的软件存放位置/var/ ...