JavaScript使用JS从JSON获取信息并遍历输出到网页展示信息------JavaScript

港控/mmm° 2024-02-19 11:59 8阅读 0赞

>     <!DOCTYPE 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>
>     		
>     		
>     		
>     		
>     		
>     		<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>
> 
> <!DOCTYPE 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>  
>   
>   
>   
>   
>   
> <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>