学习目的

了解JSON的基础概念和作用

掌握JSON的基础使用

掌握JSON在实

一、JSON入门

概念

JSON全称JavaScript Object Notation，意为JavaScript对象标记，简称JSON。JSON本质是一种标准的数据交换格式，是目前市场上非常流行，90%以上的系统采用的交换数据的格式(不同编程语言之间进行数据交换的格式)。JSON也可以称为无类型对象，轻量级、轻巧、体积小、易解析。

特点

JSON是一种标准的轻量级的数据交换格式，其体积小，易解析；

JSON在JS中以JS对象的形式存在；

java后端与浏览器前端进行数据交互的"工具"就是JSON，java获取的数据以字符串格式返回到浏览器，浏览器中的JS将字符串数据封装成JSON格式对象进行解析展示

JSON与XML

在实际的开发中有两种常用数据交换格式使用最多，其一是JSON，另一个是XML。

XML体积较大，解析麻烦，但是有其优点是：语法严谨。(通常银行相关的系统之间进行数据交换使用XML)

// XML定义对象

张三

24

男

里斯

21

男

王五

20

女

JSON的语法格式

// 创建JSON对象：JSON也可以称为无类型对象

var jsonObj = {

"属性名" : 属性值,

"属性名" : 属性值,

"属性名" : 属性值,

"属性名" : 属性值,

….

};

示例

// 定义传统JS对象

Student = function(sno,sname,sex){

this.sno = sno;

this.sname = sname;

this.sex = sex;

}

// 创建对象

var stu = new Student("111","李四","男");

// 访问JS对象的属性

alert(stu.sno + "," + stu.sname + "," + stu.sex);

// 定义：JSON格式对象，对象定义与创建合并

var studentObj = {

"sno" : "110",

"sname" : "张三",

"sex" : "男"

}

// 访问JSON对象的属性

alert(studentObj.sno + "," + studentObj.sname + "," + studentObj.sex);;

JSON数组

在目前的开发中，所有流行的编程语言用于数据交换的格式都是JSON。而在JAVA中，数据是以对象的形式存在的，当java中的多个对象返回给浏览器时，通常JS采用JSON数组的形式存储java返回的多个数据。

// []代表的是一个数组，{}代表的是一个JSON对象

var students = [

{"sno":"110","sname":"张三","sex":"男"},

{"sno":"120","sname":"李四","sex":"男"},

{"sno":"130","sname":"王五","sex":"男"}

];

1.1 eval函数

描述

eval函数是可以将JS中的字符串当做一段JS代码解释并执行的函数。

应用场景

在java连接数据库进行查询数据之后，会将查询得到的数据在java程序中拼接成JSON格式的“字符串”，再将json格式的字符串返回到浏览器。因此java返回到浏览器上的仅仅是一个"JSON格式的字符串"，而不是一个json对象，浏览器需要使用eval函数 将json格式的字符串转换成json对象才能完整的展示返回的数据。

格式

window.eval("字符串" );

示例

// var i = 100;原本是普通字符串，但用在js中则是定义变量

window.eval("var i = 100;");

alert("i = " + i); // i = 100

// 将json格式的字符串转换成json对象，\为转义符

var fromJava = "{\"name\":\"zhangsan\",

\"password\":\"123\",

\"sex\":\"男\"}"; // java发给浏览器的json格式"字符串"

// 将以上json格式字符串转换成json对象

window.eval("var jsonObj = " + fromJava);

// 访问json对象，浏览器端执行输出

alert(jsonObj.name + "," + jsonObj.password);

1.2 JSON数据与表格

描述

在JS中，java后台发送到前端浏览器的数据通常存储在JSON对象中，而JS常用的解析方式就是将JSON数据解析完成后 动态显示在

示例

// json数据

var data = {

"total" : 4,

"emps" : [

{"empno":7369,"ename":"SMITH","sal":800.0},

{"empno":7361,"ename":"SMITH2","sal":1800.0},

{"empno":7360,"ename":"SMITH3","sal":2800.0},

{"empno":7362,"ename":"SMITH4","sal":3800.0}

]

};

// 把JSON数据展示到table当中.

window.onload = function(){

// 当点击显示按钮后，获取JSON数据并显示

var displayBtnElt = document.getElementById("displayBtn");

displayBtnElt.onclick = function(){

// 将JSON数据用变量存储

// var emps = data.emps;

var html = "";

// 循环遍历JSON数组，得到JSON中的每一个具体对象

for(var i = 0; i < data.emps.length; i++){

var emp = data.emps[i];

// 字符串拼接，返回时在解析

html += "

";

html += "

"+emp.empno+"";

html += "

"+emp.ename+"";

html += "

"+emp.sal+"";

html += "

";

}

// 往table标签的tbody中插入HTML代码

document.getElementById("emptbody").innerHTML = html;

// 往span中插入HTML代码

document.getElementById("count").innerHTML = data.total;

}

}

员工信息列表

员工编号 员工名字 员工薪资

总共0条数

常见面试题

在JS当中：[]和{}有什么区别？

[] 描述的是数组对象。

{} 描述的是JSON格式对象。