学习目的
- 了解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定义对象
<?xml version="1.0" encoding="UTF-8" ?>
<students>
<student sno="101">
<sname>张三</sname>
<sage>24</sage>
<sex>男</sex>
</student>
<student sno="102">
<sname>里斯</sname>
<sage>21</sage>
<sex>男</sex>
</student>
<student sno="103">
<sname>王五</sname>
<sage>20</sage>
<sex>女</sex>
</student>
</students>
- 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数据解析完成后 动态显示在<table>中。 - 示例
<script type="text/javascript">
// 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 += "<tr>";
html += "<td>"+emp.empno+"</td>";
html += "<td>"+emp.ename+"</td>";
html += "<td>"+emp.sal+"</td>";
html += "</tr>";
}
// 往table标签的tbody中插入HTML代码
document.getElementById("emptbody").innerHTML = html;
// 往span中插入HTML代码
document.getElementById("count").innerHTML = data.total;
}
}
</script>
<input type="button" value="显示员工信息列表" id="displayBtn" />
<h2>员工信息列表</h2>
<hr>
<table border="1px" width="50%">
<tr>
<th>员工编号</th>
<th>员工名字</th>
<th>员工薪资</th>
</tr>
<tbody id="emptbody">
<!-- 固定写法，不易动态扩展
<tr>
<td>7369</td>
<td>SMITH</td>
<td>800</td>
</tr>
<tr>
<td>7369</td>
<td>SMITH</td>
<td>800</td>
</tr>
-->
</tbody>
</table>
总共<span id="count">0</span>条数
常见面试题
- 在JS当中：[]和{}有什么区别？
- [] 描述的是数组对象。
- {} 描述的是JSON格式对象。
