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搭配~~
