JavaScript笔记--- JSON(对象的创建,访问对象属性等;eval函数;模拟将数据库中的信息打印在页面的表格中)

Posted 猿头猿脑的王狗蛋

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript笔记--- JSON(对象的创建,访问对象属性等;eval函数;模拟将数据库中的信息打印在页面的表格中)相关的知识,希望对你有一定的参考价值。

JSON是一种标准的轻量级的数据交换格式,具有体积小,易解析的特点......

楔子:


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函数;模拟将数据库中的信息打印在页面的表格中)的主要内容,如果未能解决你的问题,请参考以下文章

JSON学习笔记

JavaScript 笔记 -- JSON

JavaScript学习笔记28

JavaScript基础笔记JSON

javascript - 知识笔记

Json 学习笔记1