08 JSON
- JavaScript Object Notation(JavaScript对象标记),简称JSON。(数据交换格式)。JSON是一种标准的轻量级的数据交换格式。特点是:体积小,易解析
- JSON主要的作用是:一种标准的数据交换格式。(目前非常流行,90%以上的系统,系统A与系统B交换数据的话,都是采用JSON。)
- 在实际的开发中有两种数据交换格式,使用最多,其一是JSON,另一个是XML。XML体积较大,解析麻烦,但是有其优点是:语法严谨。(通常银行相关的系统之间进行数据交换的话会使用XML。)
8.1 代码比较
两个数据要交换可以用json或者xml,通过与java交换
对比一下数据的轻量级
// 创建JSON对象(JSON也可以称为无类型对象。轻量级,轻巧。体积小。易解析。)
var studentObj = {
"sno" : "110",
"sname" : "张三",
"sex" : "男"
};
// 访问JSON对象的属性
alert(studentObj.sno + "," + studentObj.sname + "," + studentObj.sex);
也可以进行数组的遍历
// JSON数组
var students = [
{"sno":"110","sname":"张三","sex":"男"},
{"sno":"120","sname":"李四","sex":"男"},
{"sno":"130","sname":"王五","sex":"男"}
];
// 遍历
for(var i = 0; i < students.length; i++){
var stuObj = students[i];
alert(stuObj.sno + "," + stuObj.sname + "," + stuObj.sex);
}
所以json的代码格式是:
var jsonObj = {
"属性名" : 属性值,
"属性名" : 属性值,
"属性名" : 属性值,
"属性名" : 属性值,
....
};
对比:
之前没有使用JSON的时候,定义类,创建对象,访问对象的属性.
Student = function(sno,sname,sex){
this.sno = sno;
this.sname = sname;
this.sex = sex;
}
var stu = new Student("111","李四","男");
alert(stu.sno + "," + stu.sname + "," + stu.sex);
8.2 JSON对象
- 通过键值对进行一一书写
- 可以json嵌套json数据
var user = {
"usercode" : 110,
"username" : "张三",
"sex" : true,
"address" : {
"city" : "北京",
"street" : "大兴区",
"zipcode" : "12212121",
},
"aihao" : ["smoke","drink","tt"]
};
// 访问人名以及居住的城市
alert(user.username + "居住在" + user.address.city);
代码示列:
请自行设计JSON格式的数据,这个JSON格式的数据可以描述整个班级中每一个学生的信息,以及总人数信息。
var jsonData = {
"total" : 3,
"students" : [
{"name":"zhangsan","birth":"1980-10-20"},
{"name":"lisi","birth":"1981-10-20"},
{"name":"wangwu","birth":"1982-10-20"}
]
};
记住格式符号不要错乱,特别是;
8.3 eval函数
通过eval赖连接前后端的函数
功能:将字符串当做一段JS代码解释并执行
例如:window.eval(“var i = 100;”);
主要在实战中
- java连接数据库,查询数据之后,将数据在java程序中拼接成JSON格式的“字符串”,将json格式的字符串响应到浏览器
- java响应到浏览器上的仅仅是一个"JSON格式的字符串",还不是一个json对象
- 可以使用eval函数,将json格式的字符串转换成json对象
var fromJava = "{\"name\":\"zhangsan\",\"password\":\"123\"}"; //这是java程序给发过来的json格式的"字符串"
// 将以上的json格式的字符串转换成json对象
window.eval("var jsonObj = " + fromJava);
// 访问json对象
alert(jsonObj.name + "," + jsonObj.password); // 在前端取数据
用java处理json发过来的字符串对象,\这是转义字符,将其转换成json的对象,在用对象调用属性
js中访问对象属性还可以用这种代码格式
// JS中访问json对象的属性
alert(json.username);
// JS中访问json对象的属性
alert(json["username"]);
8.4 设置table的tbody
将java中的数据展示到table中
表格页面的html格式如下
<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>
<tr>
<td>7369</td>
<td>SMITH</td>
<td>800</td>
</tr>
-->
</tbody>
</table>
总共<span id="count">0</span>条数
本身tbody没有数据,通过点按钮,将json的数据显示到页面上
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}
]
};
通过点击按钮框实现的代码逻辑如下
每循环一次加一个html的页面以及json的数据
数据都加载到tbody中
document.getElementById("emptbody").innerHTML = html;
document.getElementById("count").innerHTML = data.total;
完整代码如图
// 希望把数据展示到table当中.
window.onload = function(){
var displayBtnElt = document.getElementById("displayBtn");
displayBtnElt.onclick = function(){
var emps = data.emps;
var html = "";
for(var i = 0; i < emps.length; i++){
var emp = emps[i];
html += "<tr>";
html += "<td>"+emp.empno+"</td>";
html += "<td>"+emp.ename+"</td>";
html += "<td>"+emp.sal+"</td>";
html += "</tr>";
}
document.getElementById("emptbody").innerHTML = html;
document.getElementById("count").innerHTML = data.total;
}
}
8.5 面试题
在JS当中:[]和{}有什么区别
- [] 是数组
- {} 是JSON
java中的数组:int[] arr = {1,2,3,4,5};
JS中的数组:var arr = [1,2,3,4,5];
JSON:var jsonObj = {“email” : “zhangsan@123.com”,“age”:25};