理解JSON：数据交换的轻量级格式-优快云博客

本文链接：https://blog.youkuaiyun.com/2302_78914093/article/details/131554349
1、认识json

	（1）什么是json
			JavaScript Object  Notation，JavaScript 对象表示法。(可以理解为把对象封装起来）
			一种轻量级的数据交换格式
			采用独立于语言的文本格式
			通常用于在客户端和服务器之间传递数据
			
			json是数据的交换格式，比xml更加轻巧。
			json是js的原生的格式，通过js操作json不需要依赖其他东西，直接对json格式进行操作。	
		
		*json 的优点
			轻量级交互语言
			结构简单
			易于解析
			
	（2）json数据格式怎么写
	
		* json有两种数据格式
		第一种：json的对象的格式
			* 写法 {json数据的名称1:json数据的值1,json数据的名称2:json数据的值2.....}
			** 类似于key-value形式
			** 名称和值之间使用 冒号 隔开，多个值之间使用 逗号 隔开
			
			** json数据的名称是字符串的类型，
				json数据的值 string, number, object, array, true, false, null
			** 具体数据的格式 {"name":"zhangsan","age":20,"addr":"nanjing"}

		第二种：json的数组的格式(json的嵌套，json数据中继续封装json数据。)
		
			* 写法 [json对象1,json对象2........]
			** 在数组里面有多个json对象，多个json对象之间使用逗号进行隔开
			** 具体数据的格式 [{"name":"lucy","age":20},{"name":"mary","age":30}]
			
	（3）可以使用json的这两种格式组成更加复杂json的格式
			* 复杂的格式 ：
			{"Stuarr":[{"name":"zhangsan","addr":"beijing"},{"name":"lisi","addr":"tianjin"}]}


		具体代码中的书写：
				<script type="text/javascript">  
				//第一种json、 数据格式的写法。
				var stu = {"name":"zhangsan", "age":18, "addr":"nanjing"};
				
				//json 格式的第二种写法，相当于讲json、第一种格式放在一个数组里面。后续解析的时候先从外层解析。
				var stus = [
				{
				"name":"zhangsan",
				"age":13, 
				"addr":"nanjing"
				},{
				"name":"lisi",
				"age":14, 
				"addr":"beijign"
				},{
				"name":"wangwu",
				"age":15, 
				"addr":"wuhan"
				}
				];
			  </script>
			
			
			
			
			
			
			

2、js解析json 练习1

	引入jquery jar 包：
	
		  <script type="text/javascript" src="../js/jquery-1.12.4.js"></script>
		
		  
			<div>
				用户名：<div id="name"></div>
				年龄<div id="age"></div>
				地址：<div id="addr"></div>
			</div>
			//注意先后加载的问题，我们要先显示出来div，然后在给他们设置值，所以 js脚本 不能写在head 标签里面了。
		<script type="text/javascript">
				<!--
				//	在html页面中，写一些div盒子，用来存储数据。
				// 在js脚本中，我们封装一个 json数据，通过jquery id选择器，我们获取到各个展示数据的div，
				//	拿到这些元素，给这些元素赋值。
				-->
				//json 数据
				var stu = {"name":"zhangsan","age":18,"addr":"nanjing"};
				
				//通过id选择器，分别给div 设置显示内容。
				$("#name").html(stu.name);
				$("#age").html(stu.age);
				$("#addr").html(stu.addr);
		</script>
			

	
	
3、json数据练习二，


		（1）、通过for循环，遍历数组内容，设置ul  li标签内容。
		
			<script type="text/javascript" src="../js/jquery-1.12.4.js"></script>
			 
			 </head>
			  
			  <body>
			   <!-- 通过ul 标签，给他里面设置一些li标签。设置的值是通过解析json来处理的。 -->
				<div>
					<ul id="div-ul" type="square"></ul>
				</div>

				<script type="text/javascript">
					var arr =["美国","中国","俄国"];
					for(var i =0; i <arr.length; i++){
						var li = "<li>"+arr[i]+"</li>";
						$("#div-ul").append(li);
					}
				</script>



		（2）通过jquery中数组及json对象的 each(function(){})  方法来具体实现遍历。
		
		
				<select id="sel" style="display: inline;">
	
				</select>
		
		
			
				/* 在secect 下拉菜单中，我们也输入内容，把上面的arr数据，添加成引用类型，
				然后通过 jquery中的each 方法，类似于高级遍历foreach，来进行遍历。  */
				
					var $arr = $(arr);
					$arr.each(function(){
					//function回调函数中，底层就实现了高级ffor循环。被遍历的元素，用this 来表示。
					if(this=="中国"){
						var opt = "<option selected='selected'>"+this+"</option>";
						$("#sel").append(opt);
					}else{
						var opt = "<option>"+this+"</option>";
						$("#sel").append(opt);
					}
					});

		（3）添加json数据，到table表格中。使用each()循环遍历。
		
			* table 表格代码
				<table id="usertable" border ="2" borderColor="red" cellPadding="10px">
					<caption style="font-size: 24px;color: red">用户数据</caption>
					<tr>
						<th>用户ID</th>
						<th>用户名</th>
						<th>用户密码</th>
					</tr>
				</table>
						
		
			* json 用户数据。
					/*
					封装一个json数据。用户数据，id，name ，password ，
					然后通过each()方法遍历json，然后把数据添加到table 表格中。
					
					*/
					//在json 数据中，默认数据属性名称，默认就是字符串类型的，所以，可以添加""  也可以不加
					var users =[
					{
						id:1,
						name:"zhangsan",
						password:123456
					},{
						id:2,
						name:"lisi",
						password:123456
					},{
						id:3,
						name:"wangwu",
						password:123456
					}
					];
					
				* 给table中设置，json包含的内容。
										
					$(users).each(function(){
						//注意这时候this的对象，是{}中的封装的user的数据。包括id，name ，password
						var  userdata = "<tr><td>"+ this.id +"</td><td>"+this.name +"</td><td>"+ this.password+"</td></tr>";
						$("#usertable").append(userdata);
					});
						
			
	（4）、jsp页面中，在div盒子中，动态添加json数据。
	
			div设置三个，分别写user ： name，age addr
				<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
				  </head>
				  
				  <body>
					
					<div>
						<div id="name"></div>
						<div id="age"></div>
						<div id="addr"></div>
					</div>

					<script type="text/javascript">
						//定义一个json格式的数据。
						var user = {name:"zhangsan",age:18,addr:"wuhan"};
						
						$("#name").html(user.name);
						$("#age").html(user.age);
						$("#addr").html(user.addr);
					</script>
Json数据格式的学习
