【笔记】JSON教程

课程来自:https://code.ziqiangxuetang.com/json/json-intro.html

一、概述

JSON:JavaScript Objection Notation(Javascript 对象表示法)

JSON是存储和交换文本信息的语法,类似XML。

JSON比XML更小、更快、更易解析。

二、JSON实例

{

"employees":[

{"firstname" : "John", "lastname" : "Doe"},

{"firstname" : "Anna", "lastname" : "Smith"},

{"firstname" : "Peter", "lastname" : "Jones"}

]

}

这个 employee 对象是包含 3 个员工记录(对象)的数组

三、什么是JSON

JSON指的是JavaScript对象表示法(JavaScript Object Notation)

JSON是轻量级的文本数据交换格式

JSON独立于语言

JSON具有自我描述性,更易理解

JSON使用JavaScript语法来描述对象,但是JSON仍然独立于语言和平台。

JSON解析器和JSON库支持许多不同的编程语言

四、JSON转化为JavaScript对象

JSON文本格式在语法上与创建JavaScript对象的代码相同。

由于这种相似性,无需解析器,JavaScript程序能够使用内建的eval()函数,用JSON数据来生成原生的JavaScript对象。

JSON最常见的用法之一,是从web服务器上读取JSON数据(作为文件或者作为HttpRequest),将JSON数据转化为JavaScript对象,然后在网页中使用该数据。

五、JSON实例--来自字符串的对象

创建包含JSON语法的JavaScript字符串:

var txt = '{ "employees" : [' +

'{ "firstName":"John" , "lastName":"Doe" },' +

'{ "firstName":"Anna" , "lastName":"Smith" },' +

'{ "firstName":"Peter" , "lastName":"Jones" } ]}';

注意:

单引号包含的都是字符串噢!

外面是一个大字典,这个大字典的key是employees,value是一个数组,这个数组的元素是字典。

由于JSON语法是JavaScript的子集,JavaScript函数eval()可用于将JSON文本转换为JavaScript对象。

eval()函数使用的是JavaScript编辑器,可解析JSON文本,然后生成JavaScript对象。必须把文本包围在括号中,这样才能避免语法错误:

var obj = eval("(" + txt + ")");

在网页中使用JavaScript对象:

<html>

<body>

<h2>Create Object from JSON String</h2>

<p>

First Name: <span id="fname"></span><br>

Last Name: <span id="lname"></span><br>

</p>

<script>

var txt = '{"employees":[' +

'{"firstName":"John","lastName":"Doe" },' +

'{"firstName":"Anna","lastName":"Smith" },' +

'{"firstName":"Peter","lastName":"Jones" }]}';

var obj = eval ("(" + txt + ")");

document.getElementById("fname").innerHTML=obj.employees[1].firstName

document.getElementById("lname").innerHTML=obj.employees[1].lastName

</script>

</body>

</html>

六、JSON解析器

eval()函数可以编译执行任何JavaScript代码,这隐藏了一个潜在的安全问题。

使用JSON解析器将JSON转换为JavaScript对象是更安全的做法。JSON解析器只能识别JSON文本,而不会编译脚本。

在浏览器中,这提供了原生的JSON支持,而且JSON解析器的速度更快。

七、JSON语法规则

JSON语法是JavaScript语法的子集。

1、数据在名称/值对中

2、数据由逗号分割

3、花括号保存对象

4、方括号保存数组

八、JSON名称/值对

JSON数据的书写格式是:名称/值对。

名称/值对包括字段名称(在双引号中),后面写一个冒号,然后是值:

“fistname”:“John”

九、JSON值

JSON值可以是:

1、数字(整数或浮点数)

2、字符串(在双引号中)

3、逻辑值(true或者false)

4、数组(在方括号中)

5、对象(在花括号中)

null

十、JSON对象

JSON对象在花括号中书写:

对象可以包含多个名称/值对:

{"firstname":"John", "lastname":"Doe"}

十一、JSON数组

JSON数组在方括号中书写:

数组可以包含多个对象:

{

"employees": [

{ "firstName":"John" , "lastName":"Doe" }, 

{ "firstName":"Anna" , "lastName":"Smith" }, 

{ "firstName":"Peter" , "lastName":"Jones" }

]

}

对象employees是包含三个对象的数组。每个对象代表一条关于某人姓和名的记录。

十二、JSON使用JavaScript语法

因为JSON使用JavaScript语法,所以无需额外的软件就能处理JavaScript中的JSON

通过JavaScript,可以创建一个对象数组并这样赋值:

<html>

<body>

<h2>Create Object from JSON String</h2>

<p>First Name: <span id="fname"></span></p>

<script>

var employees = [

{ "firstName" : "John" , "lastName" : "Doe" },

{ "firstName" : "Anna" , "lastName" : "Smith" },

{ "firstName" : "Peter" , "lastName" : "Jones" }, ];

employees[1].firstName="Jonatan";

document.getElementById("fname").innerHTML=employees[1].firstName;

</script>

</body>

</html>

可以像这样修改数据:

employees[0].firstname = "aaa"

十三、JSON文件

JSON文件的文件类型是 ".json"

JSON文本的MIME类型是“application/json”

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,287评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,346评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,277评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,132评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,147评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,106评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,019评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,862评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,301评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,521评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,682评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,405评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,996评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,651评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,803评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,674评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,563评论 2 352

推荐阅读更多精彩内容