JSON ( JavaScript Object Notation )
- JSON是一種格式,基于文本,優于輕量,用于交換數據;
- 相比XML這個前輩,JSON更加輕量,XML需要用到很多標簽,感受一下就好了
- 像上面的例子中,你可以明顯看到XML格式的數據中標簽本身占據了很多空間,JSON比較輕量,即相同數據,以JSON的格式占據的帶寬更小,這在有大量數據請求和傳遞的情況下是有明顯優勢的。
- 但更重要的JSON是易于閱讀、編寫和機器解析的,即這個JSON對人和機器都是友好的,而且又輕,獨立于語言(因為是基于文本的),所以JSON被廣泛用于數據交換。
- 前端Er對這個套路肯定很熟悉,發送AJAX從API中獲取JSON格式的數據,然后執行頁面的邏輯,下面以前端JS進行AJAX的POST請求為例,后端PHP處理請求為例:
- 前端構造一個JS對象,用于包裝要傳遞的數據,然后將JS對象轉化為JSON字符串,再發送請求到后端;
2. 后端PHP接收到這個JSON字符串,將JSON字符串轉化為**PHP對象**,然后處理請求。
3. 可以看到,相同的數據在這里有3種不同的表現形式,分別是前端的**JS對象**、傳輸的**JSON字符串**、后端的**PHP對象**,JS對象和PHP對象明顯不是一個東西,但是由于大家用的都是**JSON**來傳遞數據,大家都能理解這種數據格式,都能把**JSON這種數據格式很容易地轉化為自己能理解的數據結構**;
JSON 是 JavaScript 的子集?
- 我一直以為JSON就是JS的子集,是為什么形成了這種理解呢?
// JS對象
let foo = {};
// JS對象,只不過你可以把這個稱之為JSON格式的 JavaScript對象
let bar = {
"name": "bar",
"price": 1000,
"buyer": [1, 2, 3]
};
// 這個就是JSON格式的字符串
let str1 = JSON.stringify(bar);
let str2 = '{"name": "bar", "price": 1000, "buyer": [1, 2, 3]}';
- 你看不僅能相互轉換,嵌套格式和語法都一樣,再看看下面一個POST請求,場景是一個復雜的配置信息
const postData = {
"attribution": 1,
"category": 2,
"groupid": 3,
"parentid": 4,
"shopid": 5,
"groupname": "foo",
"config": {
"tagfilter": [{"id": 123, "name": "group-XX"}],
"product": [{"id": "123123123123123", "name": "prod-YY"}]
}
};
$.ajax({
url: '/api/xxx/yyy', //api接口地址
data: postData, //復雜的配置信息
contentType: "application/json;charset=utf-8", // 客戶端請求格式
type: 'POST', // 數據傳輸方式
dataType: 'json', // 服務端返回數據格式
}).done((res) => {
if (res.success && res.data) {
console.log(res.data);
} else {
layer.msg(res.msg);
}
}).fail(() => {
layer.msg('網絡開小差~請稍后再試!');
}).always( ()=> {
utils.loadingOff();
});
- 你看,既然你需要一個JSON,我就給你好了,就如同你給我的JSON一樣,我直接把JS的一個對象給POST過去,還異想天開的給加了一個
contentType
,嗯~后端拿到就是一個JSON,然后Chrome直接默認給我轉換成了表單提交過去了···;
JSON & JavaScript Object?
1. 兩個本質不同的東西為什么那么密切?
JSON 是一種語法用來序列化對象、數組、數值、字符串、布爾值和 null
。它基于 JavaScript 語法,但與之不同:一些JavaScript不是JSON,一些JSON不是JavaScriptJSON和JS對象本質上完全不是同一個東西,就像“斑馬線”和“斑馬”,“斑馬線”基于“斑馬”身上的條紋來呈現和命名,但是斑馬是活的,斑馬線是非生物。
同樣,"JSON"全名"JavaScript Object Notation",所以它的格式(語法)是基于JS的,但它就是一種格式,而JS對象是一個實例,是存在于內存的一個東西。
說句玩笑話,如果JSON是基于PHP的,可能就叫PON了,形式可能就是這樣的了['propertyOne' => 'foo', 'propertyTwo' => 42,],如果這樣,那么JSON可能現在是和PHP比較密切了。
此外,JSON是可以傳輸的,因為它是文本格式,但是JS對象是沒辦法傳輸的,在語法上,JSON也會更加嚴格,但是JS對象就很松了。那么兩個不同的東西為什么那么密切,因為JSON畢竟是從JS中演變出來的,語法相近。
至于更詳細的區別可以看MDN

2. 如何通過AJAX傳輸復雜的JSON格式呢?
-
這鍋不歸jQuery;
調用
$.ajax
函數時,即使設置contentType
為application/json; charset=utf-8
,如果不設置,默認給你一個application/x-www-form-urlencoded
爽歪歪;如果給data
屬性傳遞的是一個的JS對象,這時候jQuery
也不會將其自動轉換為JSON string
,jQuery
默認會將給data
賦予的對象(除字符串之外的任何東西)處理為適用于”application/x-www-form-urlencoded”的請求字符串。有一個選項processData來控制默認的自動轉換,設置其為false,jQuery就不會自動轉換對象。
-
JSON.stringify();
JS 新建一個對象,將復雜的配置信息賦值給這個對象,最后JSON.stringify()一下,將這個JavaScript值轉換為一個JSON字符串,那么后端也方便解析,如果你就這么把這個JS對象POST過去,Chrome下就會給你解析成表單提交,如果數據夠復雜,讓后端解析你的東西都心煩~~~那么你從接口拿到的數據,就會變成字符串了,你就需要用到下面這個方法;
-
JSON.parse();
一般用到這個,當然不可能是后端會這么給你復雜數據結構,然后你要parse一下其實,我也見過,一般是要往瀏覽器里面存儲臨時信息,再次打開瀏覽器時就算用戶沒有通過接口保存,也可以方便記憶上次用戶的配置~一般和localStorage 和sessionStorage搭配~~