## json简介
JSON全程"JavaScript Object Notation",意思是JavaScript对象表示法,它是一种基于文本,独立于语言的轻量级数据交换格式。XML也是一种数据交换格式,为什么没有选择XML呢?因为XML虽然可以作为跨平台的数据交换格式,但是在JS中处理XML非常不方便,同时XML标记比数据多,增加了交换产生的流量,而json没有附加任何标记,在JS中可作为对象处理,所以更倾向于JSON来交换数据。
## json的两种结构
JSON有两种表示结构:<b>对象和数组</b>
对象结构以”{”大括号开始,以”}”大括号结束。中间部分由0或多个以”,”分隔的”key(关键字)/value(值)”对构成,关键字和值之间以”:”分隔,语法结构如代码。
~~~
{
key1:value1,
key2:value2,
...
}
~~~
数组结构以”\[”开始,”\]”结束。中间由0或多个以”,”分隔的值列表组成,语法结构如代码。
~~~
[
{
key1:value1,
key2:value2
},
{
key3:value3,
key4:value4
}
]
~~~
## json字符串
~~~
var Str = "this is a String"; //字符串
var jsonObj = {Name:"dick",age:"20",ID:"160512"}; //json对象
var jsonStr = " {Name:"dick",age:"20",ID:"160512"}"; //json字符串
//json字符串指的是符合json格式要求的js字符串
~~~
## 在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: "对象里的对象"
}
};
~~~
1,从JSON中读数据
~~~
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"])
}
~~~
2,向JSON中写数据
比如要往JSON中增加一条数据,代码如下:
~~~
function Add() {
//往JSON对象中增加了一条记录
obj.sex= "男" //或者obj["sex"]="男"
}
~~~
增加数据后的json对象如图
![](https://box.kancloud.cn/c8ffe3be26768e21eeab68300a8e2e76_559x146.png)
3,修改JSON中的数据
我们现在要修改JSON中count的值,代码如下:
~~~
function Update() {
obj.count = 10; //或obj["count"]=10
}
~~~
4,删除JSON中的数据
我们现在实现从JSON中删除count这条数据,代码如下:
~~~
function Delete() {
delete obj.count;
}
~~~
- 第一章.git
- 1-1 git基本命令
- 1-2 ssh的配置
- 1-3 版本回退
- 第二章 markdown基本语法
- 第三章 HTML
- 3-1 HTML标签概念
- 3-2 html结构
- 3-3 基本标签
- 3-4 input输入框
- 3-5 table表格
- 第四章 CSS
- 4-1 CSS基础
- 4-2 基本样式
- 4-3 选择器
- 4-4 盒子模型
- 4-5 进阶样式
- 4-6 样式继承
- 4-7 浮动
- 4-8 定位
- 4-8 水平垂直居中
- 4-9 特殊情况
- 4-10 表单
- 4-11 2D效果
- 4-12 BFC
- 第五章 JavaScript笔记
- 5-1JS基础
- 5-2 DOM介绍
- 5-3 DOM操作详解
- 5-4 JSON详解
- 第六章 jQuery
- 6-1 jQuery概述
- 6-2 jQuery选择器
- 6-3 jQuery常用操作
- 第七章 AJAX
- 7-1 原生ajax
- 7-2 http,get,post
- 7-3 跨域
- 7-4 jQuery-ajax
- Web前端命名规范