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函數都挺重要的,在項目中也都是特別的常見的。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章