一、什么是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. HDU 6186 CS Course【前后缀位运算枚举/线段树】

    [前后缀枚举] #include<cstdio> #include<string> #include<cstdlib> #include<cmath> ...

  2. Poj2182 Lost Cows（玄学算法）

    题面 Poj 题解 不难发现最后一位就是\(pre[n]+1\),然后消除这个位置对其他位置的贡献,从左到右扫一遍,必定有至少一个位置可以得出,循环这个过程,\(O(n^2)\)出解. #includ ...

  3. NetworkManager概述

    NetworkManager服务是管理和监控网络设置的守护进程,CentOS7更加注重使用NetworkManager服务来实现网络的配置和管理,CentOS7以前是通过network服务管理网络,以 ...

  4. NGUI EventDelagate事件委托

    using System.Collections; using System.Collections.Generic; using UnityEngine; public class BUttonCl ...

  5. 【uva 10294】 Arif in Dhaka (First Love Part 2) （置换，burnside引理|polya定理）

    题目来源:UVa 10294 Arif in Dhaka (First Love Part 2) 题意:n颗珠子t种颜色 求有多少种项链和手镯 项链不可以翻转 手镯可以翻转 [分析] 要开始学置换了. ...

  6. 【分类讨论】【计算几何】【凸包】hihocoder 1582 ACM-ICPC国际大学生程序设计竞赛北京赛区(2017)网络赛 E. Territorial Dispute

    题意:平面上n个点,问你是否存在一种黑白染色方案,使得对于该方案,无法使用一条直线使得黑色点划分在直线一侧,白色点划分在另一侧.如果存在,输出一种方案. 如果n<=2,显然不存在. 如果所有点共 ...

  7. 【点分治】【FFT】Gym - 101234D - Forest Game

    存个求树上每种长度(长度定义为路径上点数)的路径条数的模板:num数组中除了长度为1的以外,都算了2次. 不造为啥FFT数组要开八倍. #include<cstdio> #include& ...

  8. JVM命令-java服务器故障排查

    一.top(Linux命令) 执行top命令:    (查看进程15477的详细情况,下文用到) 系统信息(前五行): 第1行:Top 任务队列信息(系统运行状态及平均负载),与uptime命令结果相 ...

  9. (小规模)b牌棋盘完美覆盖数

    (小规模)b牌棋盘完美覆盖数 考虑一个普通的国际象棋棋盘,它被分成8*8(8行8列)的64个正方形.设有形状一样的多米诺骨牌,每张牌恰好覆盖棋盘上相邻的两个方格(即1*2的骨牌).那么能否把32个这样 ...

  10. CentOS 6.9下KVM虚拟机快照创建、删除、恢复（转）

    使用文件快照的方式实现文件备份,但单说快照(snapshot)的话,他是某一时间点(版本)你能看到的该时间点备份文件状态的全貌,通过文件的快照(全貌)你能恢复到特定时间点(版本)的文件状态. 创建虚拟 ...