遍历JSON获取数据
<!DOCTYPE html>
<!-- 这是HTML的注释 -->
<html lang="en" id="myHtml">
<head>
<!-- 这里不是设置了编码,而是告诉浏览器,用什么编码方式打开文件避免乱码 -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HtmlAll</title>
</head>
<body>
<!-- JSON全称为JavaScript Object Notation即为数据交换格式,对象标记 -->
<!-- JSON的主要作用是一种标准的轻量的数据交换格式,特点是体积小易解析 -->
<!-- 在实际的开发中,JSON和XML是用的最多的数据交换格式 -->
<!-- XML体积大,解析麻烦,优点是格式严谨,相对更难解析 -->
<!-- HTML和XML有一个父类叫SGML(标准通用的标记语言) -->
<script type="text/javascript">
window.onload = function()
{
var jsonObj =
{
"sno" : "110",
"sname" : "Jack",
"sex" : "男"
};
student = function(sno,sname,sex)
{
this.sno = sno;
this.sname = sname;
this.sex = sex;
}
//访问json对象属性
// Json也被称为无类型对象,轻量级,轻巧,体积小,易解析
// alert(jsonObj.sno + jsonObj.sname + jsonObj.sex);
var stu = new student(jsonObj.sno,jsonObj.sname,jsonObj.sex);
// alert(stu.sno + stu.sname + stu.sex);
var students =
[
{
"sno" : "110",
"sname" : "Jack",
"sex" : "男"
},
{
"sno" : "120",
"sname" : "Rose",
"sex" : "女"
},
{
"sno" : "130",
"sname" : "Tim",
"sex" : "男"
}
];
for (var i = 0; i < students.length; i++)
{
var student = students[i];
// alert(student.sno + student.sname + student.sex);
}
var user =
{
"usercode" : 110,
"username" : "Rose",
"sex" : true,
"address" : {
"city" : "北京",
"street" : "大兴区",
"zipcode" : "12221231"
},
"aihao" : ["smoke","drink","tt"]
};
// 访问人名以及居住的城市
// alert(user.username + user.address.city);
//描述整个班级
var iop =
{
"total" : 3,
"studentInfo" : [
{
"usercode" : 110,
"username" : "Rose",
"sex" : true,
"address" : {
"city" : "北京",
"street" : "大兴区",
"zipcode" : "12221231"
},
"aihao" : ["smoke","drink","tt"]
},
{
"usercode" : 110,
"username" : "Jack",
"sex" : true,
"address" : {
"city" : "北京",
"street" : "大兴区",
"zipcode" : "12221231"
},
"aihao" : ["smoke","drink","tt"]
},
{
"usercode" : 110,
"username" : "Tim",
"sex" : true,
"address" : {
"city" : "北京",
"street" : "大兴区",
"zipcode" : "12221231"
},
"aihao" : ["smoke","drink","tt"]
}
]
}
//遍历学生表所有的学生名字
for (var i = 0; i < iop.studentInfo.length; i++) {
// alert(iop.studentInfo[i].username);
}
//Eval函数的作用是将字符串当作一段JS代码解释执行
window.eval（"var tyi = 100;");
// alert(tyi);
//为什么要用eval函数,因为我们java查询数据库后,将数据在java程序中拼接成json格式的字符串
//将json回传给前端浏览器,也就是说java响应到浏览器的仅仅是一段json形式的字符串,浏览器不认识
//接下来要用eval函数,将这段字符串转换为json对象
var fromJava = "{\"sno\":\"110\",\"sname\":\"Jack\",\"sex\":\"男\"}";
//使用eval函数转换对象
window.eval（"var JsonIO = " + fromJava);
//输出json的信息
// alert(JsonIO.sno);
//JS中,{}和[]有什么区别
//{}是json,而[]是数组
//JSON是一种业内公认的数据交换格式标准
//json在JS中以对象的形式存在
//因为JS中存在的包括function在内的都可以视为对象
var jsin = {
"username" : "zhangsan"
};
//两种取值方法
// alert(jsin.username);
// alert(jsin["username"]);
var empData = {
"total" : 4,
"emps" : [
{
"empno" : 7369,
"ename" : "Smith",
"sal" : 800.0
},
{
"empno" : 7369,
"ename" : "Jack",
"sal" : 800.0
},
{
"empno" : 7369,
"ename" : "Tim",
"sal" : 800.0
},
{
"empno" : 7369,
"ename" : "Rose",
"sal" : 800.0
}
]
};
document.getElementById("show").onclick = function()
{
var html = "";
var count = 0;
for (var i = 0; i < empData.emps.length; i++)
{
count++;
var emp = empData.emps[i];
html += "<tr><td>";
html += emp.empno;
html += "</td><td>";
html += emp.ename;
html += "</td><td>"
html += emp.sal;
html += "</td></tr>"
}
document.getElementById("empsShow").innerHTML += html;
document.getElementById("EmpNumber").innerText = count;
}
}
//希望把数据暂时到table中
</script>
<table align="center" border="solid">
<h1>员工列表</h1>
<input type="button" value="显示员工信息" id="show"/>
<thead>
<tr>
<th>员工编号</th>
<th>员工名</th>
<th>薪水</th>
</tr>
</thead>
<tbody id="empsShow">
</tbody>
</table>
总共<span id="EmpNumber">0</span>条记录
</body>
</html>