Json 简易教程

一、什么是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]);
    }
}

时间: 2024-11-13 06:44:05

Json 简易教程的相关文章

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

这几天圈子里到处都在传播着这样一个东西,微信公众平台提供了一种新的开放能力,开发者可以快速开发一个小程序,取名曰:微信公众平台-小程序 据说取代移动开发安卓和苹果,那这个东东究竟是干吗用的?但很多人觉得是网页版应用. 有的人很鸡冻,但是--最后文章会提及具体的权限开放问题,所以,还是保持一颗冷静的?比较好. 那我们先来看看组件和API开放了哪些服务: 视图容器:视图(View).滚动视图.Swiper 基础内容:图标.文本.进度条 表单组件:按钮.表单等等 操作反馈 导航 媒体组建:音频.图片.

JavaScript简易教程

这是我所知道的最完整最简洁的JavaScript基础教程. 这篇文章带你尽快走进JavaScript的世界--前提是你有一些编程经验的话.本文试图描述这门语言的最小子集.我给这个子集起名叫做"JavaScript简易教程",并推荐准备深入阅读细节和高级技巧之前的新手阅读.心急吃不了热豆腐.文章的最后提出如何进一步学习. 警告:下面是我所描述的规则集和最佳实践.我喜欢整洁清晰(例如,你可以随时通过下面的目录快速导航).规则是无懈可击的,但不可避免--每个人的理解不同. 目录 1. 本文约

Ocelot简易教程(五)之集成IdentityServer认证以及授权

原文:Ocelot简易教程(五)之集成IdentityServer认证以及授权 Ocelot简易教程目录 Ocelot简易教程(一)之Ocelot是什么 Ocelot简易教程(二)之快速开始1 Ocelot简易教程(二)之快速开始2 Ocelot简易教程(三)之主要特性及路由详解 Ocelot简易教程(四)之请求聚合以及服务发现 Ocelot简易教程(五)之集成IdentityServer认证以及授权 Ocelot简易教程(六)之重写配置文件存储方式并优化响应数据 Ocelot简易教程(七)之配

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

原文:Ocelot简易教程(六)之重写配置文件存储方式并优化响应数据 本来这篇文章在昨天晚上就能发布的,悲剧的是写了两三千字的文章居然没保存,结果我懵逼了.今天重新来写这篇文章.今天我们就一起来探讨下如何重写Ocelot配置文件的存储方式以及获取方式. 作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/9807125.html 很多人都说配置文件的配置很繁琐,如果存储在数据库就方便很多,可以通过自定义UI界面在后台进行路由的配置,然后通过调用Admini

BIND简易教程(1):安装及基本配置

首先,为什么说是简易教程呢?因为BIND的功能实在太多,全写出来的话要连载好久,我觉得我没有那么多精力去写:而我了解的仅仅是有限的一点点,不敢造次.百度上的文章也是一抓一大把呐!所以,教点基本使用方法,有需求的同学可以再翻翻BIND管理员手册.那么,还是直接开始说正题吧.本次还是像PowerDNS一样是一个连载,写三篇. 目录:BIND简易教程(1):安装及基本配置(本篇)BIND简易教程(2):BIND视图配置(待续)BIND简易教程(3):DNSSec配置(待续) 首先说说安装.安装是非常简

Ajax与JSON使用教程

Ajax与JSON使用教程1.1.1 摘要 Ajax技术的核心是XMLHttpRequest对象(简称XHR),可以通过使用XHR对象获取到服务器的数据(入门教程qkxue.net),然后再通过DOM将数据插入到页面中呈现(腾云科技ty300.com).虽然名字中包含XML,但Ajax通讯与数据格式无关,所以我们的数据格式可以是XML或JSON等格式. XMLHttpRequest对象用于在后台与服务器交换数据,具体作用如下: 在不重新加载页面的情况下更新网页    在页面已加载后从服务器请求数

Emacs简易教程

Emacs简易教程阅读: 命令: $emacs 进入之后,输入: C-h t 这里,C-h表示按住[Ctrl]键的同时按h ####### 20090620 *退出: 输入“C-x C-c” *撤销: 输入"C-x u" 或输入"C-_" 这里,"C-_"比较好输入一些(好像C--也行),但是有的键盘上面没有"_"就只能输入“C-x u”了,撤销动作能进行20次. *向上翻页: 输入"M-v" 这里,右手的

CCS2.2基于软件仿真简易教程(汇编)

CCS2.2基于软件仿真简易教程(汇编) Rev 1.0 Writer Nirvana Silence 配置目标芯片 打开此图标 导入配置,生成gel文件,导入点击close 然后关闭 保存changes 启动工程软件 新建工程.asm文件,添加到工程 新建文件 保存为汇编格式 添加到工程 编写程序,编译程序,load程序 在新建的ASM文件中输入以下程序,查看运行后(1030H).(1040H).*AR3,AR4的值 记得助记符前面至少要有一个空格 编译 没有问题,load .out文件 打开

getopts简易教程(Small getopts tutorial)译文(未完成)

getopts简易教程 当你想用一种专业的方式解析命令行参数时,getopts就是要选择的工具.和它的旧版本兄弟命令getopt不同(注意没有s!),getopts是shell内置命令.高级地方表现在 你不需要通过一个外部命令传递参数 getopts可以很容易的设置一些你能用于解析参数的变量(对于一个外部程序来说这是不可能的!) 你不必再处理过去一些使用getopt时的一些bug实现(空格, -) getopts已经在POSIX?定义 一些其他解析位置参数的其他方法(不用getopt(s))在这