个人java学习路线-JSON
介绍
JSON:JavaScript Object Notation(数据交换格式)
标准的轻量级的数据交换格式
体积小,易解析
实际开发中最多用的是JSON和XML
但XML:体积大,解析麻烦,语法严谨(通常银行相关的系统)
初见
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>1</title>
</head>
<body>
<script type="text/javascript">
//创建JSON对象(也可以称为无类型对象)
var studentObj={
"sno":"110",
"sname":"张三",
"sex":"男"
};
alert(studentObj.sno+","+studentObj.sname+","+studentObj.sex)
var students=[{"sno":"110","sname":"张三","sex":"男"},
{"sno":"120","sname":"李四","sex":"男"},
{"sno":"130","sname":"王五","sex":"男"}];
for (var i = 0; i < students.length; i++) {
alert(students[i].sno+","+students[i].sname+","+students[i].sex);
}
</script>
</body>
</html>
JSON对象属性也可以像数组一样一层套一层
<script type="text/javascript">
var user={
"usercode":110,
"username":"张三",
"sex":true,
"address":{
"city":"洛斯里克",
"street":"步行街",
"zipcode":"1221"
},
"hobby":["吃","喝","睡"]
};
alert(user.address.city);
</script>
eval函数将普通字符串转换为js代码
<script type="text/javascript">
/*
将字符串当成一段JS代码解释并执行
*/
window.eval("var i=100");
//alert("i="+i);
var fromJava="{\"name\":\"zhangsan\",\"password\":\"123\"}";
window.eval("var jsonObj="+fromJava);
alert(jsonObj.name+","+jsonObj.password);
/*
在js中:
[]是数组
{}是JSON
*/
var json={
"username":"zhangsan"
}
alert(json.username);
alert(json["username"]);
/* for (var propertyName in json) {
} */
</script>
用例:用JSON显示列表信息
<body>
<script type="text/javascript">
var data={
"total":4,
"emps":[
{"empno":7369,"ename":"SMITH","sal":800.0},
{"empno":7380,"ename":"TOM","sal":1000.0},
{"empno":7404,"ename":"YONTH","sal":1200.0},
{"empno":7502,"ename":"LIADA","sal":1800.0},
]
}
window.onload=function(){
var btnElt=document.getElementById("btn");
btnElt.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("sp").innerText=data.total;
}
}
</script>
<h2>员工信息列表</h2>
<input type="button" id="btn" value="显示员工信息列表" />
<hr />
<table border="1px" width="50%">
<tr>
<th>员工编号</th>
<th>员工名字</th>
<th>员工薪资</th>
</tr>
<tbody id="emptbody">
</tbody>
</table>
总共<span id="sp">
0
</span>条记录
</body>