JSON簡介及前端簡單解析(一)
JSON現在常用來做前後端資料互動,兩個蝴蝶飛只是簡單的對JSON做一下講解和簡單使用。關於JSON,我還了解的遠遠不夠。由於本人經驗有限,嘴皮子不溜,所以學術性,概念性,底層性的知識點暫時不做介紹。文章中有錯誤之處,歡迎拍磚和指點。特別感謝"菜鳥教程"(所舉例子和思路大部分改編於此)和"JSON官網"(圖片來源),所有的資料大部分是兩者提供,為了方便書寫,故不一一指名出處,請諒解,非常抱歉。
上一章簡單介紹了Struts2實現JSON和Ajax操作(十四),如果沒有看過,請觀看上一章
一 JSON的簡單概述
JSON,全稱是JavaScript Object Natotion(JavaScript 物件表示法),是儲存和交換文字資訊的語法。與XML類似。但JSON 比 XML 更小、更快,更易解析。是輕量級的,且具有自我描述性,更好地理解。
JSON 獨立於語言:JSON 使用 Javascript語法來描述資料物件,但是 JSON 仍然獨立於語言和平臺。JSON 解析器和 JSON 庫支援許多不同的程式語言。 目前非常多的動態(PHP,JSP,.NET)程式語言都支援JSON。
JSON從描述上看,是Java Script物件的表示法,所以與Java Script有非常密切的聯絡。JSON 文字格式在語法上與建立 JavaScript 物件的程式碼相同。由於這種相似性,無需解析器,JavaScript 程式能夠使用內建的 eval() 函式,用 JSON 資料來生成原生的 JavaScript 物件。
JSON檔案的字尾名是.json, MIME型別為: application/json。
MIME(Multipurpose Internet Mail Extensions)多用途網際網路郵件擴充套件型別。是設定某種副檔名的檔案用一種應用程式來開啟的方式型別,當該副檔名檔案被訪問的時候,瀏覽器會自動使用指定應用程式來開啟。多用於指定一些客戶端自定義的檔名,以及一些媒體檔案開啟方式。
二 JSON與XML的區別
二.一 與 XML 相同之處
- JSON 是純文字
- JSON 具有"自我描述性"(人類可讀)
- JSON 具有層級結構(值中存在值)
- JSON 可通過 JavaScript 進行解析
- JSON 資料可使用 AJAX 進行傳輸
二.二 與 XML 不同之處
- 沒有結束標籤
- 更短
- 讀寫的速度更快
- 能夠使用內建的 JavaScript eval() 方法進行解析
- 使用陣列
- 不使用保留字
二.三 Ajax方面具體說明
對於 AJAX 應用程式來說,JSON 比 XML 更快更易使用:
使用 XML (在資料訊息互動方面,用XML過多)
- 讀取 XML 文件
- 使用 XML DOM 來迴圈遍歷文件
- 讀取值並存儲在變數中
使用 JSON (在資料傳遞方面,特別是前後臺數據互動方面)
- 讀取 JSON 字串
- 用 eval() 處理 JSON 字串
三 JSON的單值處理 (均用JSP講解,故要建立一個Web動態工程(eclipse))
JSON的單值處理方式很簡單, 就是簡單的{key:value} 形式,且只有這一個。 用{} 進行括起來。相當於key=value形式。
其中key值表示的是key,value表示的是值。 類似於Map鍵值對的方式。 其中value可以取值的型別有:
有字串型別,數字型別,布林型別(true,false),null 和物件型別,陣列型別,(下面會單獨講,意思是可以互相巢狀)。
三.一 數字型別
在index.jsp頁面中,建立一個簡單的JSON的頁面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="jquery-3.1.0.min.js"></script>
<title>兩個蝴蝶飛對JSON的不深入瞭解</title>
<script>
$(function(){
//寫具體的操作
})
</script>
</head>
<body>
<h2>關於JSON的學習</h2>
<div id="myjson">
<span id="single"></span>
<span id="name"></span>
<span id="age"></span>
<span id="sex"></span>
</div>
</body>
</html>
1.單數字時:
//定義成json物件,用{} 拓起來
var obj={"age":23};
$("#age").text(obj.age);
2.也可以將23用雙引號括起來,即
var obj={"age":"23"};
$("#age").text(obj.age);
但這個時候,表示的是字串23,並不是數字23.
3.也可以將age不括起來,即
var obj={age:"23"};
$("#age").text(obj.age);
4. {"age":23} 相當於為age=23。
5. 至於修改和刪除,新增等操作,用下面的物件來解釋。這裡暫時不解釋了。
三.二 字串型別
//定義成json物件,用{} 拓起來
var obj={"name":"兩個蝴蝶飛"};
$("#name").text(obj.name);
2. 如果將後面的字串值去掉"" ,即
var obj={"name":兩個蝴蝶飛};
$("#name").text(obj.name);
這樣會報錯的,頁面上也不會顯示出值。 所以,如果value是非數字型別,那麼應該用"" 括起來。
不要以為沒有彈出框就不是報錯,用F12開啟開發者模式看一下
3. 現在取出的值是obj.name, 如果寫錯了,即寫成obj.age, 並不存在的值,
var obj={"name":"兩個蝴蝶飛"};
$("#name").text(obj.age);
頁面上不會報錯,但什麼東西都不會顯示的
三.三 布林型別值 true,false
var obj={"sex":true};
if(obj.sex){
console.log("性別是男");
}else{
console.log("性別是女");
}
裡面的true為布林型別值,重新整理頁面,控制檯輸出:
可以取出值來直接放在if中進行判斷。
2. 有的說,將true 變成"false", 是字串型別的,為什麼還列印輸出呢?
//定義成json物件,用{} 拓起來
var obj={"sex":"false"};
if(obj.sex){
console.log("性別是男");
}else{
console.log("性別是女");
}
這個時候,輸出的是
性別也是男,並不是女。 因為這個時候,false為字串值。 obj.sex時,取出的是字串型別的false。 所以仍然列印性別是男。 (js判斷if條件為false的情況:
邏輯物件無初始值或者其值為 0、-0、null、""、false、undefined 或者 NaN,那麼if判斷 false ,其他為true
)
字串型別的false,與布林型別的false,並不一樣。
var obj={"sex":"false"};
console.log(typeof(obj.sex));
上面的例子也就是: (以下均不截圖了)
if("false"){
console.log("性別是男"); //輸出為男
}else{
console.log("性別是女");
}
3. 如果想讓其判斷為女,那麼就需要用字串去判斷條件了。 (以下均不截圖了)
//定義成json物件,用{} 拓起來
var obj={"sex":"false"};
console.log(typeof(obj.sex));
if(obj.sex!="false"){
console.log("性別是男");
}else{
console.log("性別是女"); //輸出性別是女
}
三.四 值為null
//定義成json物件,用{} 拓起來
var obj={"money":null};
console.log("型別是:"+typeof(obj.money)); //object
console.log(obj.money); //null, 並不是什麼都不顯示
if(obj.money){
console.log("有錢");
}else{
console.log("沒有錢"); //null為false, 顯示為沒有錢
}
四 值為單個物件 {} (即Java 中JavaBean形式)
上面只有一個屬性,很難表示一個物件的完整資訊,也是無法表示出來的。 故可以在{} 封裝多個物件。 單個值表示也是用:進行分隔,但值與值之間用,進行分隔。
//定義成json物件,用{} 拓起來
var obj={"name":"兩個蝴蝶飛","age":24,"sex":"男"};
console.log("型別:"+typeof(obj)); //為object
$("#name").text(obj.name);
$("#age").text(obj.age);
$("#sex").text(obj.sex);
在取值的時候,只要相應的.key就行了。
四.二 有人說,會見過這種模式,
var obj={"person":{"name":"兩個蝴蝶飛","age":24,"sex":"男"}};
即現在後面的value值,並不是單純的一個數字,而是一個物件。 這種表示實際上三.四 兩種方式的結合使用。{"person":value},
value是一個單個物件。
這個時候取值只要將前面的person帶上即可。 先找到對應的key(person), 找到Key之後,繼續找裡面的key。 巢狀使用
//定義成json物件,用{} 拓起來
var obj={"person":{"name":"兩個蝴蝶飛","age":24,"sex":"男"}};
console.log("型別:"+typeof(obj)); //為object
$("#name").text(obj.person.name); //正常取的方式,這種才會顯示(採用)
$("#age").text(obj.person.money); //沒有money值,不出錯,但也不會顯示
$("#sex").text(obj.sex);//是找不到男這個值 的。不出錯,也不會顯示
四.三 新增物件屬性
var obj={"name":"兩個蝴蝶飛","age":24,"sex":"男"};
console.log("型別:"+typeof(obj));
//新增一個物件屬性為money
obj.money="新新增的money屬性";
$("#name").text(obj.money); //取出的值為:新新增的money屬性
$("#age").text(obj.age);
$("#sex").text(obj.sex);
讓JSON物件新.一個要新增的屬性即可。 即obj.name="要新增的值";
所以有的時候,如果新增的層次較多的話,可以這樣新增.
var obj={};
obj.name="兩個蝴蝶飛";
obj.age=24;
obj.sex="男";
$("#name").text(obj.name);
$("#age").text(obj.age);
$("#sex").text(obj.sex);
四.四 修改物件屬性
//定義成json物件,用{} 拓起來
var obj={"name":"兩個蝴蝶飛","age":24,"sex":"男"};
console.log("型別:"+typeof(obj));
//修改名稱的值 直接用=號
obj.name="兩個蝴蝶飛啊飛啊";
$("#name").text(obj.name); //取出的值為:兩個蝴蝶飛啊飛啊
$("#age").text(obj.age);
$("#sex").text(obj.sex);
修改物件用取出的值="新值"; 即可。
要改變的值存在的話,為修改。 不存在的話, 為新增。
四.五 刪除物件屬性
//定義成json物件,用{} 拓起來
var obj={"name":"兩個蝴蝶飛","age":24,"sex":"男"};
console.log("型別:"+typeof(obj));
//刪除一個屬性
delete obj.age;
$("#name").text(obj.name);
$("#age").text(obj.age); // 被刪除了,無法取出
$("#sex").text(obj.sex);
這個時候,就會刪除掉age這個屬性。
如果是:
//刪除obj
delete obj;
這個時候,是並不會刪除的obj物件的。 obj.name,obj.age,obj.sex是依舊可以取出的。只能 delete 物件.屬性。
五 陣列物件 Array 用[ ]括起來,用索引取出值
簡單來說,常見的陣列物件可以分為兩種,第一種,是單值的情況。第二種,是物件情況。
五.一 單值陣列
1. 放置同一種類型的
var obj=[12,24,36,48];
取出值時,用索引下標進行取出。
//定義成json陣列物件,用[]拓起來
var obj=[12,24,36,48];
console.log(obj[0]); //12
console.log(obj[obj.length-1]); //48
console.log(obj[obj.length]);//undefined
2 .其中,放置的值可以為同一個型別的,也可以為不同的型別的。
//定義成json陣列物件,用[]拓起來
var obj=["兩個蝴蝶飛",24,false,true,null,"男"];
console.log(obj[0]); //兩個蝴蝶飛
console.log(obj[obj.length-1]);//男
console.log(obj[obj.length]);//undefined
這裡面的值有字串,數字,布林值,還有null。
3. 也可以放置物件型別
//定義成json陣列物件,用[]拓起來
var obj=["兩個蝴蝶飛",24,false,true,null,{'name':'兩個蝴蝶飛','age':24,'sex':'男'}];
console.log(obj[0]);//兩個蝴蝶飛
console.log(obj[obj.length-1].name);//兩個蝴蝶飛
console.log(obj[obj.length-1].age);//24
五.二 物件陣列
裡面的值放置多個物件,是第一種單值的變形體。很常用的一種方式 (即Java 中List<JavaBean> 形式)
當然裡面也可以進行巢狀,但這裡只是簡單的形式。
var obj = [
{'name':'慧芳','age':28,'sex':'女'},
{'name':'莉莉','age':26,'sex':'女'},
{'name':'兩個蝴蝶飛','age':24,'sex':'男'}
];
一般常見寫成key:value 形式,即將array寫成value形式
var obj = {"persons":
[{'name':'慧芳','age':28,'sex':'女'},
{'name':'莉莉','age':26,'sex':'女'},
{'name':'兩個蝴蝶飛','age':24,'sex':'男'}]
};
五.三 物件陣列的輸出
第一種形式輸出:
// 第一種形式
for(var i=0;i<obj.persons.length;i++){
// 不要寫成 var p=obj.persons[i], 然後p.name (這是錯誤的)
console.log(obj.persons[i].name);
console.log(obj.persons[i].age);
console.log(obj.persons[i].sex);
}
第二種形式輸出:
// 第二種形式
for(var p in obj.persons){
//都是先取出obj.persons[p]
console.log(obj.persons[p].name);
console.log(obj.persons[p].age);
console.log(obj.persons[p].sex);
}
3. 上面是JSON常見的兩種形式輸出,當成Jquery進行整合之後,可以用Jquery的迴圈遍歷進行輸出
// 第三種形式, each形式迴圈遍歷輸出
$.each(obj.persons,function(n,value){
console.log(value.name);
console.log(value.age);
console.log(value.sex);
})
六 JSON形式字串複雜格式
json物件之間可以相互的巢狀,可以物件與陣列巢狀,也可以物件與單值巢狀,也可以單值與陣列進行巢狀。
有時候,巢狀的時候很容易出錯。 可以利用工具進行相應的解析和驗證。
在解析的時候,也要慢慢的進行相應的解析,層層進行解析。
七 JSON物件與JSON字串之間相互轉換
七.一 JSON物件轉換成JSON字串
1. var result=JSON.stringify(obj);
七.二 JSON字串轉換成JSON物件
1. var obj= JSON.parse(result)
2. var obj= $.parseJSON(result)
3. var obj=eval('(' + result + ')');
在解析和遍歷時,要注意巢狀的順序。
謝謝!!!