JSON

目錄

JSON簡介

JSON 的解析和序列化

練習

---

JSON簡介

• JSON是存儲和交換文本信息的語法。類似XML。JSON比XML更小、更快、更易解析。
• JSON是輕量級的文本數據交換格式。
• JSON獨立於語言。（JSON使用JavaScript語法來描述數據對象，但是JSON仍然獨立於語言和平臺）
• JSON具有自我描述性，更易理解。
• JSON是在AJAX中代替XML交換數據的更佳方案。

JSON語法

JSON語法規則：（JSON符合JavaScript的語法）

• 數據在名稱/值對中
• 數據由逗號分隔
• 花括號保存對象
• 方括號保存數組

JSON值可以是：

1. 數字（整數或者浮點數）
2. 字符串（在雙引號中）
3. 邏輯值（true或false）
4. 數組（在方括號中）
5. 對象（在花括號中）
6. null

舉個簡單的例子：

            <script>
			//js中的對象表示
			var user={
				name:'張三',
				age:'30'
			}
			//json中的對象表示(json本質上是字符串，只不過它是有數據結構，可以進行解析)
			var user={
				"name":"張三",
				"age":"30"
			}
			
			//普通數組
			var arr=["aaa",100,true]
			//json數組
			["aaa",100,true]//少了變量賦值
			
			//數組對象組合嵌套使用
			[{
				"name":"aaa",
				"age":30
			},{
				"name":"bbb",
				"age":25
			},{
				"name":"ccc",
				"age":18
			}]
		</script>

JSON 的解析和序列化

一般情況下，我們的json數據都是從服務器端獲取到的，獲取的json數據是以字符串的形式返回的。這個字符串雖然是json格式的，但是不能被直接使用，我們必須將該字符串轉化爲一個對象才能正常解析它。

• JavaScript函數eval()可用於將JSON文本轉化爲JavaScript對象。（eval()函數可編譯並執行任何JavaScript代碼。同時隱藏了一個潛在的安全問題：如果JSON中包含惡意代碼也會被直接執行。）
• 使用JSON解析器將JSON轉換爲JavaScript對象是更安全的做法。JSON解析器只會識別JSON文本。

       1.JSON的解析：json數據轉換成js對象。

          語法：var myObject=JSON.parse(myJSONtext,reviver);

       2.JSON的序列化：js對象（字符串）轉換成json數據。

          語法：var myJSONtext=JSON.stringify(myObject,replacer);

json的解析：

        <script>
			//實際使用的時候json數據需要從服務器加載，
			//這裏假定下面的數據是從服務器加載過來的，來演示後續的操作
			var jsonstr='[{"name":"aaa","age":30},{"name":"bbb","age":25},{"name":"ccc","age":18}]';
			//alert(typeof(jsonstr))
			
			//json數據轉換成js對象
		 	var jsonobj=JSON.parse(jsonstr);
		 	//alert(jsonstr)
		 	alert(jsonobj)
		 	alert(jsonobj[0].name)
		 	alert(typeof(jsonobj))
		 	
		 	var jsonobj=JSON.parse(jsonstr,function(key,value){
		 		if((key=='name')){
		 			return 'VIP會員:'+value;
		 		}else{return value}
		 	});
		 	alert(jsonobj[0].name);
		</script>

JSON 的序列化：

<script>
			var jsonobj=[
							{"name":"aaa","age":30,lv:2},
							{"name":"bbb","age":25,lv:1}
						]
			alert(jsonobj[0].name+'\n'+jsonobj[0].age+'\n'+jsonobj[0].lv)
			var jsonstr=JSON.stringify(jsonobj)
			alert(typeof(jsonobj))
			alert(typeof(jsonstr))

			//第二個參數
			var jsonstr=JSON.stringify(jsonobj,['lv'])
			alert(jsonstr)

			var jsonstr=JSON.stringify(jsonobj,function(key,value){
				if(key=='lv'){
					return '等級爲：'+value
				}else{
					return value
				}
			})
 			alert(jsonstr)
			
			//第三個參數表示縮進
			var jsonstr=JSON.stringify(jsonobj,null,4)
			alert(jsonstr)
		</script>

練習

JSON數據輸出：將JSON數據以表格的形式在頁面輸出。（要點：json數據的解析和表格的動態輸出）

                <script>
			//假定下面數據是從服務器獲取到的
			var jsonstr='[{"name":"aaa","age":30},{"name":"bbb","age":25},{"name":"ccc","age":18}]'
			function textJson(){
				var jsonobj=JSON.parse(jsonstr)
				//alert(jsonstr)
				//alert(jsonobj)
				output(jsonobj)
			}
			
			function output(o){
				document.write('<table><tr><th>key</th><th>value</th></tr>')
				//alert(o.length)
				for(var i in o){//訪問jsonstr對象
					//alert(o[i])
					for(var j in o[i]){//遍歷每一個對象裏的每一個屬性
						//alert(o[i][j])
						document.write('<tr><td>'+j+'</td>'+'<td>'+o[i][j])+'</td></tr>'
					}
				}
				document.write('</table>')
			}
			
			textJson()
		</script>

                <style type="text/css">
			td{
				width: 150px;
				height: 30px;
				background: rgba(10,100,10,0.3);
			}
		</style>

效果圖：