JS中JSON总结

目录

一、思维导图

二、什么是Json,有什么用?

三、JSON是一种轻量级的数据交换格式,特点是:

四、在实际的开发中有两种数据交换格式,使用最多的一个是JSON,另一个是XML。

XML体积量大,难解析,语法结构准确。

五、创建Json对象(语法格式)、访问Json对象的属性

六、如何创建Json数组,以及遍历数组

七、Eval函数

八、[]和{}有什么区别?

(1)在JS当中,[]和{}有什么区别?

(2)//访问JSON的两种格式

九、例子:如何循环JSON将其导入到table中

十、 总结


一、思维导图

二、什么是Json,有什么用?

JavaScript Object Notation 简称JSON(数据交换格式)

主要作用:进行数据交换,系统A与系统B交换数据都是采用JSON

三、JSON是一种轻量级的数据交换格式,特点是:

(1)体积小,易解析。

四、在实际的开发中有两种数据交换格式,使用最多的一个是JSON,另一个是XML。

XML体积量大,难解析,语法结构准确。

XML和HTML有一个共同的父亲:SGML(标准通用的标记语言)

HTML主要做页面展示:语法松散,很随意。XML主要做数据存储和数据描述,所以语法相当严格。

五、创建Json对象(语法格式)、访问Json对象的属性

var jsonObj = {

    "属性名":"属性值"

    "属性名":"属性值"

    "属性名":"属性值"

}

Var studentiObj={

"sno":"110"

"sname":"张三"

"sex":"男"

};
//访问Json对象的属性
alert(studentObj.sno + "," + studentObj.sname + "," + student.Sex);

//之前没有使用JSON的时候,定义类,创建对象,访问对象的属性。

Student = function(){

    this.sno = sno;
    this.sname = sname;
    this.sex = sex;

}

var stu = new student("111","李四","男");
alert(stu.sno + "," + stu.sname + "," + stu.sex);

六、如何创建Json数组,以及遍历数组

//Json数组
var student = [

    {"sno":"110","sname":"张三","sex":"男"},

    {"sno":"120","sname":"李四","sex":"男"},

    {"sno":"130","sname":"王三","sex":"男"},

];

//遍历
for(var i=0 ; i< student.length; i++)
{
    var stuObj = student[i]

    alert(stuObj.sno + "," + stuObj.sname + "," + stuObj.sex);

}

七、Eval函数

(1)作用:

把字符串当做一段JS代码解释并执行。

window.eval("val i = 100;");
alert("i=" + i);

//java连接数据库,查询数据之后,将数据在java程序中拼接成JSON格式的“字符串”,将json格式的字符串相应到浏览器。

//也就是说java相应到浏览器上的仅仅是一个"JSON格式的字符串",还不是一个Json对象

//可以使用eval函数,将json格式的字符串转换成json对象。

Var fromJava = "{"name":"zhangsan","password":123};

这个时候如果不转移就被当成双引号和前面的双引号匹配了。

//将以上的json格式的字符串转化成json对象。

Window.eval("val jsonObj =" +fromJava);

//访问json对象

Alert(jsonObj.name + "," +jsonObj.password);//在前端取数据

八、[]和{}有什么区别?

(1)在JS当中,[]和{}有什么区别?

[]代表的是数组,{}是JSON

java中的数组:int [] arr = {1,2,3,4,5};

JS中的数组:var arr = [1,2,3,4,5];

JSON: var jsonObj ={"email":"[email protected]","age":25};

JSON是一钟数据交换格式,在JSON中被当成一种对象。

(2)//访问JSON的两种格式

Alert( json.username);
Alert(json["username"]);

九、例子:如何循环JSON将其导入到table中

<!doctype html>
	<html>
		<head>
			<title>eval函数</title>
		</head>
		<body>
			<script type="text/javascript">
				//有这些Json数据
				var data = {
					"total":4,
					"emps":[
						{"empno":7369,"ename":"SMITH","sal":800.0},
						{"empno":7369,"ename":"SMITH","sal":800.0},
						{"empno":7369,"ename":"SMITH","sal":800.0},
						{"empno":7369,"ename":"SMITH","sal":800.0},
					
					]
				
				};
				//希望把数据展示到table里面
				window.onload=function(){
					var displayBtnElt = document.getElementById("displayBtn");
					displayBtnElt.onclick=function(){
						var emp = data.emps;
						var html = "";
						console.log(emp[0].empno);
						for(var i =0;i<emp.length;i++){
						html +="<tr>";
						html +="<td>"+emp[i].empno+"</td>";
						html +="<td>"+emp[i].ename+"</td>";
						html +="<td>"+emp[i].sal+"</td>";
						html +="</tr>";
						}
					document.getElementById("emptbody").innerHTML=html;
					document.getElementById("count").innerHTML=data.total;

					}
					
				
				}

			</script>
			<input type="button" value="显示员工信息列表" id="displayBtn" />
			<h2>员工列表</h2>
			<hr>
				<table border="1px" width="50%">
					<tr>
						<th>员工编号</th>
						<th>员工名字</th>
						<th>员工薪资</th>
					</tr>
					<tbody id="emptbody">
	
					</tbody>
				</table>
				总共<span id="count">0</span>条数
		</body>
		
	</html>

十、 总结

Json的循环和eval函数都挺重要的,在项目中也都是特别的常见的。

发布了168 篇原创文章 · 获赞 28 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/MyxZxd/article/details/105515014