JavaScript笔记--- JSON（对象的创建，访问对象属性等；eval函数；模拟将数据库中的信息打印在页面的表格中）
Posted 猿头猿脑的王狗蛋
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript笔记--- JSON（对象的创建，访问对象属性等；eval函数；模拟将数据库中的信息打印在页面的表格中）相关的知识，希望对你有一定的参考价值。
楔子：
1、JavaScript Object Notation（JavaScript对象标记），简称JSON（数据交换格式）。
JSON主要的作用是：一种标准的数据交换格式（系统A与系统B交换数据）。
2、JSON是一种标准的轻量级的数据交换格式，具有体积小，易解析的特点。
3、在实际的开发中有两种使用最多的数据交换格式，，其一是JSON，另一个是XML。
XML体积较大，解析麻烦，但是优点是：语法严谨（通常银行相关的系统之间进行数据交换的话会使用XML）。
4、JSON的语法格式：
var jsonObj =
"属性名" : 属性值,
"属性名" : 属性值,
"属性名" : 属性值,
"属性名" : 属性值,
....
;
//创建JSON对象（JSON也可以称为无类型对象，轻量级，轻巧，体积小，易解析）
一、JSON 初步：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSON 初步</title>
</head>
<body>
<script type="text/javascript">
//创建JSON对象
var student =
"sno" : "123",
"sname" : "张三",
"sex" : "男"
;
//访问JSON对象的属性
alert(student.sno + "," + student.sname + "," + student.sex);
//JSON数组
var students = [
"no":"001","name":"张伟","sex":"男","interest":"篮球",
"no":"002","name":"东方月初","sex":"男","interest":"耍无赖",
"no":"003","name":"王权霸业","sex":"男","interest":"练剑",
"no":"004","name":"王权富贵","sex":"男","interest":"成全"
];
//遍历JSON数组中所有对象的属性
for(var i = 0;i<students.length;i++)
alert("编号："+students[i].no+","+"姓名："+students[i].name+","+"性别："
+students[i].sex+","+"兴趣："+students[i].interest);
</script>
</body>
</html>
二、复杂一些的 JSON 对象：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>复杂一些的JSON对象</title>
</head>
<body>
<script type="text/javascript">
var user =
"usercode" : 001,
"username" : "王狗蛋",
"sex" : true,
"address" :
"city" : "木叶村",
"street" : "自来也路",
"zipcode" : "00001",
,
"interest" : ["搓丸子","吃拉面","看漫画"]
;
// 访问人名以及居住的城市
alert(user.username + "居住在" + user.address.city);
//访问user的全部兴趣
for(var i = 0;i < user.interest.length;i++)
alert(user.username+"的兴趣有："+user.interest[i]);
</script>
</body>
</html>
三、eval函数：
笔记：
1、eval 函数的作用：将字符串当做一段 JS 代码解释并执行。
2、java 连接数据库，查询数据之后，将数据在 java 程序中拼接成 JSON 格式的“字符串”，再将json格式的字符串响应到浏览器，也就是说 java 响应到浏览器上的仅仅是一个" JSON 格式的字符串"，还不是一个 json 对象，可以使用 eval 函数，将 json 格式的字符串转换成 json 对象。
面试题：
在JS当中：[ ]和 有什么区别？
[ ] 是数组
是JSON
java中的数组：int[ ] arr = 1,2,3,4,5 ;
JS中的数组：var arr = [1,2,3,4,5] ;
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>eval函数</title>
</head>
<body>
<!-- JSON在JS中以JS对象的形式存在 -->
<script type="text/javascript">
//这是java程序发过来的json格式的"字符串",破折号起到转义的作用
var fromJava = "\\"name\\":\\"张三\\",\\"password\\":\\"123\\"";
//执行一句JS语句（将以上的json格式的字符串转换成json对象)
window.eval("var jsonObj = " + fromJava);
//JS中访问json对象属性的两种方式:
alert(jsonObj.name);
alert(jsonObj["name"]);
</script>
</body>
</html>
四、模拟将数据库中的信息打印在页面的表格中：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>进一步剖析JSON使用</title>
</head>
<body>
<script type="text/javascript">
//数据（JSON对象）:
var data =
"total" : 4,
"emps" : [
"empno":001,"ename":"SMITH","sal":8800.00,
"empno":002,"ename":"JIM","sal":22800.00,
"empno":003,"ename":"Amy","sal":35800.00,
"empno":004,"ename":"DAMING","sal":24400.00
]
;
//设置按钮的点击事件（希望把数据展示到table中)
window.onload = function()
var displayBtnElt = document.getElementById("displayBtn");
displayBtnElt.onclick = function()
var emps = data.emps;
//一个空的字符串(准备装要执行的HTML代码)
var html = "";
//每一次循环用于填充一行用户信息到表格里
for(var i = 0; i < emps.length; i++)
var emp = emps[i];
html += "<tr align = \'center\'>";
html += "<td>"+emp.empno+"</td>";
html += "<td>"+emp.ename+"</td>";
html += "<td>"+emp.sal+"</td>";
html += "</tr>";
//通过对“emptbody标签”的innerHTML属性的赋值,来执行一段HTMl代码
document.getElementById("emptbody").innerHTML = html;
//一个简单的图层
document.getElementById("count").innerHTML = data.total;
</script>
<input type="button" value="显示员工信息" id="displayBtn" />
<!-- 二号字标题 -->
<h2>员工信息列表</h2>
<hr>
<table border="1px" >
<tr>
<th>员工编号</th>
<th>员工名字</th>
<th>员工薪资</th>
</tr>
<tbody id="emptbody">
<!-- 空空如也 -->
</tbody>
</table>
<!-- 统计一下表格中有多少员工的信息 -->
总共<span id="count">0</span>条数
</body>
</html>
以上是关于JavaScript笔记--- JSON（对象的创建，访问对象属性等；eval函数；模拟将数据库中的信息打印在页面的表格中）的主要内容，如果未能解决你的问题，请参考以下文章