當后端要你提交一個JSON配置信息時

JSON ( JavaScript Object Notation )

  • JSON是一種格式,基于文本,優于輕量,用于交換數據;
  • 相比XML這個前輩,JSON更加輕量,XML需要用到很多標簽,感受一下就好了
  • 像上面的例子中,你可以明顯看到XML格式的數據中標簽本身占據了很多空間,JSON比較輕量,即相同數據,以JSON的格式占據的帶寬更小,這在有大量數據請求和傳遞的情況下是有明顯優勢的。
  • 但更重要的JSON是易于閱讀、編寫和機器解析的,即這個JSON對人和機器都是友好的,而且又輕,獨立于語言(因為是基于文本的),所以JSON被廣泛用于數據交換。
  • 前端Er對這個套路肯定很熟悉,發送AJAX從API中獲取JSON格式的數據,然后執行頁面的邏輯,下面以前端JS進行AJAX的POST請求為例,后端PHP處理請求為例:
  1. 前端構造一個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不是JavaScript

  • JSON和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函數時,即使設置contentTypeapplication/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一下其實,我也見過,一般是要往瀏覽器里面存儲臨時信息,再次打開瀏覽器時就算用戶沒有通過接口保存,也可以方便記憶上次用戶的配置~一般和localStoragesessionStorage搭配~~

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容