JSON入门教程（适合初学者）

最新推荐文章于 2024-09-22 13:03:30 发布

学习&实践爱好者

最新推荐文章于 2024-09-22 13:03:30 发布

阅读量5.4k

点赞数 7

分类专栏： JavaScrip技术前端开发编程资料文章标签： json javascript python

本文链接：https://blog.csdn.net/cnds123/article/details/104635312

版权

JavaScrip技术同时被 3 个专栏收录

136 篇文章 25 订阅

订阅专栏

编程资料

129 篇文章 7 订阅

订阅专栏

前端开发

72 篇文章 4 订阅

订阅专栏

JSON入门教程

JSON（JavaScript Object Notation、JavaScript 对象表示法）是一种轻量级的数据交换格式。起初来源于JavaScript这门语言，后来随着使用的广泛，几乎每门开发语言都有处理JSON的API（（Application Programming Interface，应用程序接口）。JSON 是存储和交换文本信息的语法,类似 XML。 JSON 比 XML 更小、更快，更易解析。

JSON（JavaScript Object Notation）是一种基于文本的标准数据交换格式，使应用程序通过计算机网络交换数据。json文件，以.json为扩展名。

json以“键值对”存储数据，先举两个简单例子直观了解一下：

var a ={"one"："一","two":"二","three":"三"}

取值方法，a.one的值就是一。

var b={"A":"[1,2,3,4,5,6,7]","B":"[a,b,c,d,e]"}

取值方法，b.A[0]的值就是1。

现在，通过一个实例的比较来真实的说明一下XML与JSON的区别：

使用XML表示中国部分省市的数据如下：

<?xml version="1.0" encoding="utf-8" ?>
<country>
    <name>中国</name>
    <province>
        <name>山东</name>
        <citys>
            <city>青岛</city>
            <city>临沂</city>
        </citys>  　　
    </province>
    <province>
        <name>广东</name>
        <citys>
            <city>广州</city>
            <city>深圳</city>
            <city>珠海</city>
        </citys> 　　
    </province>
    <province>
        <name>湖北</name>
        <citys>
            <city>武汉</city>
            <city>黄冈</city>
        </citys>　
    </province>
</country>

使用JSON中国部分省市数据如下：

var country =

{

name: "中国",

provinces: [

{ name: "山东", citys: { city: ["青岛", "临沂"]} },

{ name: "广东", citys: { city: ["广州", "深圳", "珠海"]} },

{ name: "湖北", citys: { city: ["武汉", "黄冈"]} }

]

}

从编码的可读性来说，XML有明显的优势，毕竟人类的语言更贴近这样的说明结构。而JSON读起来更像是一个数据块，读起来比较费解，不过对人读起来费解的语言，恰恰是适合机器于都的，所以通过JSON是的索引contry.provinces[0].name就可以读取到“山东”这个值
从编码的手写难度来说，XML还是更简单一些，好读也就意味着好写；不过JSON写出来的字符明显就少很多；去掉空白制表以及换行的话，JSON基本上就是有用数据，而XML却包含很多重复的标记字符。

JSON语法

符号	说明
[]中括号	表示数组
{}	表示对象
:冒号	key和value之间的分隔符
,	用于分隔每一个单独的数据对象

基本数据以"键：值"对的形式出现，例如：

"name": "张三"

对象

JSON 对象使用在大括号中书写，对象可以包含多个 key/value（键/值）对两个"键：值"对以逗号分隔，例如，定义名为people对象：

"people":{

"ID": 1001,

"name": "张三",

"age": 24

}

或

var people={

"ID": 1001,

"name": "张三",

"age": 24

}

key必须是字符串,value可以是合法的JSON数据类型(字符串,数字,对象,数组,布尔值或者null)；key和value中适用冒号(:)分割；每个键值对适用逗号(,)分割。

可以使用点号（.）来访问对象的值：people.name 代表张三

JSON 是一种纯数据格式，它只包含属性，没有方法。

数组

JSON 数组在中括号中书写，如定义名为sites的数组：

"sites":[ "Google", "Runoob", "Taobao" ]

或var sites = [ "Google", "Runoob", "Taobao" ]

可以使用索引值来访问数组：sites[0]，代表"Google"

方括号中每个数据也可以json对象形式出现，例如：

"employees":[

{"firstName":"John", "lastName":"Smith", "age":35},

{"firstName":"Jane", "lastName":"Smith", "age":32}

]

JSON 值可以是：

数字（整数或浮点数）

字符串（在双引号中）

逻辑（布尔）值（true 或 false）

数组（在中括号中）

对象（在大括号中）

Null

下面给出几个实例

在网页（html文件）的使用

在网页（html文件）使用JSON，一般是JSON和JavaScript结合使用，用JSON存数据，用JavaScript操作数据。

例1、代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Json测试实例</title>
</head>
<body>
<h2>通过 JSON 字符串来创建对象</h3>
<p>
First Name: <span id="fname"></span><br />
Last Name: <span id="lname"></span><br />
</p>
<script type="text/javascript">
var txt = '{"employees":[' +
'{"firstName":"Bill","lastName":"Gates" },' +
'{"firstName":"George","lastName":"Bush" },' +
'{"firstName":"Thomas","lastName":"Carter" }]}';

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

document.getElementById("fname").innerHTML=obj.employees[1].firstName
document.getElementById("lname").innerHTML=obj.employees[1].lastName
</script>
</body>
</html>

保存文件名为 json01.html，用浏览器打开这个页面（双击json01.html文件即可），它会生成如下所示结果：

例2、代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Json测试实例</title>
</head>
<body>
<h2>使用 JSON 的例子</h2>
<p id="p"> </p>
<!-- <script type="text/javascript">可简化为 <script> -->
<script type="text/javascript">
var site=[
{"name":"小明","age":8},
{"name":"小红","age":9},
{"name":"小灰","age":7},
]

var str = " ";
for(var i = 0 ; i < site.length;i++){
str +="姓名:"+site[i].name +"  "+"年龄:"+site[i].age+"<br>";
}

document.getElementById("p").innerHTML = str;

</script>
</body>
</html>

保存为 json01.html，用浏览器打开这个页面，它会生成如下所示结果：