学习目的
了解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格式对象。