(JS)JSON对象

最新推荐文章于 2024-07-03 11:19:03 发布

wenshao007

最新推荐文章于 2024-07-03 11:19:03 发布

阅读量836

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/wenshao007/article/details/105583503

版权

JS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.什么是JSON，有啥用？
JavaScript Objection Notation,简称JSON。(数据交换格式)
JSON主要作用是：一种标准的数据交换格式。（目前非常流行，90%以上的系统，xitongA和系统B交换数据，均采用JSON）
2.JSON是一种标准的轻量级得数据交换格式，特点是
体积小
3.JSON和XML都是数据交换的系统
xml体积大，但是语法严谨

创建JSON对象的示例代码

//语法格式
var jsonObj = {
		"sno":"23",
		"snam":"wen",
		"ssex":"male"
};
		alert("sno"+jsonObj.sno);
//创建一个JSON数组
			var josnobjs = [
				{"sno":"w12","sname":"wenhao","sage":"18"},
				{"sno":"h12","sname":"whhhh","sage":"13"},
				{"sno":"x12","sname":"wexxxx","sage":"12"}
			];
			
			for(var i=0;i<josnobjs.length;i++){
				alert(josnobjs[i].sno); 
			}

通过以上可以看出JSON很轻量，而且易解析，当服务器把数据以JSON得形式发过来，浏览器拿到后解析非常的方便

4.JSON语法格式

var jsonobj={
	"属性名":属性值,
	"属性名":属性值,
};

JSON是无类型对象
同过稍微复杂的json操作

<script type="text/javascript">
			var jsonObj = {//无类型对象
				"name":"张三",//字符串类型
				"age":12,	//数字类型
				"address":{"city":"beijing","street":"chaoyang"}, //json类型
				"array":["1",2,3],//数组类型
			};
			
		//设计一个json,包含所有的学生信息,以及学生总人数信息
			var students = {
				"total":3
				"zhangsan":{"id":1,"age":15,"address":"chengdu"},
				"lisi":{"id":1,"age":15,"address":"chengdu"},
				"wangwu":{"id":1,"age":15,"address":"chengdu"},
			}
			alert(students.lisi.address);
		</script>

eval函数
将字符串当作一段JS代码解释并执行
eval的作用如下

<script type="text/javascript">
			/*
				eval()函数里面的字符串，当作一段JS代码来执行
			*/	
		window.eval("var i = 100;");  //相当于var i = 100;
		
		/*
			java连接数据库，查询数据之后，将数据在java程序中拼接称JSON格式的"字符串",将json格式的字符串响应到浏览器
			意为java响应到浏览器上的仅仅是一个"JSON格式的字符串"，还不是一个JSON对象
			可以使用eval函数，将json格式的字符串转换成json对象
		*/	
		var fromjava = "{\"name\":\"zhangsan\",\"age\":12}"
		//将以上的josn格式的字符串转换成josn对象
		window.eval("var josnobj = "+fromjava);
		
		alert(josnobj.name);
		</script>

JS中的’[]‘和’{}'的区别
[]:是数组
{}:是json

注意JSON是一种数据传输的格式，非常的轻量级
在JS中，JSON是以对象的形式存在

设置table的tbody，拼接字符串

<body>
		<script type="text/javascript">
			//有这些json数据
			var data = {
				"total":4,
				"emps":[
					{"empno":7369,"empname":"wenhao","sal":800},
					{"empno":7367,"empname":"wea","sal":900},
					{"empno":7369,"empname":"wenhao","sal":800},
					{"empno":7369,"empname":"wenhao","sal":800},
				],
			};
			//需求:把以上的JSON数据通过表格的形式在页面中显示出来
			window.onload = function(){
				var mybtn = document.getElementById("mybtn");
				mybtn.onclick = function(){
					var body = document.getElementById("body");//获取tbody节点,准备等会往里面写数据
					var emps = data.emps;
					var html;
					for(var i=0;i<emps.length;i++){
						html += "<tr>";
						html += "<td>"+emps[i].empno+"</td>";
						html += "<td>"+emps[i].empname+"</td>";
						html += "<td>"+emps[i].sal+"</td>";
						html += "</tr>";
						
					}
					body.innerHTML = html;
					var span = document.getElementById("myspan");
					span.innerText = "总过有"+data.total+"条";
				}
				
			}
			
			
		</script>
		<input type="button" id="mybtn" value="显示员工信息" onclick="display();"/>
		<br>
		<hr>员工信息列表</hr>
		<hr>
		<table border="1px">
			<thead>
				<tr>
					<td>员工编号</td>
					<td>姓名</td>
					<td>薪资</td>
				</tr>
			</thead>
			<tbody id="body">
				<!-- <tr>
					<td>2</td>
					<td>test</td>
					<td>test</td>
				</tr> -->
			</tbody>
		</table>
		<span id="myspan">总共有0条</span>
	</body>

效果图：
在这里插入图片描述

wenshao007

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
(JS)JSON对象

1.什么是JSON，有啥用？JavaScript Objection Notation,简称JSON。(数据交换格式)JSON主要作用是：一种标准的数据交换格式。（目前非常流行，90%以上的系统，xitongA和系统B交换数据，均采用JSON）2.JSON是一种标准的轻量级得数据交换格式，特点是体积小3.JSON和XML都是数据交换的系统 xml体积大，但是语法严谨创建JSON对象的...
复制链接

扫一扫

专栏目录