js json的格式、存儲(chǔ)與發(fā)送

2018-7-4    周周

1.Json的格式

其實(shí)json就是對(duì)象。源生的js代碼并沒(méi)有類的概念。對(duì)象救就是object。對(duì)象有自己的屬性，也可以有自己的方法。json是一種輕量級(jí)的存儲(chǔ)和交換信息的語(yǔ)言。他有自己的格式。

較為簡(jiǎn)單的json。里面只有簡(jiǎn)單的對(duì)象，key+value的形式：

  • var CellInfo = {


  •                 "CellId":         document.getElementById("CellId").value,


  •                 "UEAmount":         document.getElementById("UE value").innerText,


  •                 "BearAddDel":         document.getElementById("bearvalue").innerText,


  •                 "UEAttachDe":         document.getElementById("attachvalue").innerText,


  •                 "TotalDLTP":         document.getElementById("dlvalue").innerText,

  •               "TotalULTP":         document.getElementById("ulvalue").innerText,


  •                 };



每個(gè)元素之間用逗號(hào)隔開(kāi)。調(diào)用每個(gè)key的值可用語(yǔ)句。例如：CellInfo.UEAmunt，就可取出其中的值。

較為復(fù)雜的json。里面包含了對(duì)象。


  • var UEGroup1 = {



  •                 "UEAmount": ua[1],



  •                 "DBR1": {



  •                         "DLPackageSize": DS[1],



  •                         "ULPackageSize": US[1],



  •                         "DLTP": DP[1],



  •                         "ULTP": UP[1],



  •                         "QCI": QCI[0]



  •                 },



  •                 "DBR2": {



  •                         "DLPackageSize": DS[2],



  •                         "ULPackageSize": US[2],



  •                         "DLTP": DP[2],



  •                         "ULTP": UP[2],



  •                         "QCI": QCI[1]



  •                 },



  •                 "DBR3": {



  •                         "DLPackageSize": DS[3],



  •                         "ULPackageSize": US[3],



  •                         "DLTP": DP[3],



  •                         "ULTP": UP[3],



  •                         "QCI": QCI[2]



  •                 }



  •         };




例如這個(gè)UEGroup1，里面的元素不僅有簡(jiǎn)單的key+value，還包含了三個(gè)對(duì)象。對(duì)象里的元素用{}括起來(lái)，彼此之間用逗號(hào)隔開(kāi)。想具體訪問(wèn)某個(gè)元素的值也是通過(guò)逐層key，例如：UEGrooup1.DBR1.DLPackageSize

動(dòng)態(tài)的往json只增加元素，增加對(duì)象。

前面說(shuō)的幾個(gè)都是靜態(tài)的，提前寫(xiě)好的。那如果臨時(shí)想加一個(gè)元素，例如在Cellinfo這個(gè)json中相加一個(gè)number的元素：

CellInfo.number=10;

對(duì)于往json中添加對(duì)象。例如我們想把Cellinfo和UEGroup1這兩個(gè)object作為兩個(gè)元素加入到另外一個(gè)大的json中：

  • var PETInfo = {};//聲明了一個(gè)空的對(duì)象



  • var CellInfo = {



  •                 "CellId":         document.getElementById("CellId").value,



  •                 "UEAmount":         document.getElementById("UE value").innerText,



  •                 "BearAddDel":         document.getElementById("bearvalue").innerText,



  •                 "UEAttachDe":         document.getElementById("attachvalue").innerText,



  •                 "TotalDLTP":         document.getElementById("dlvalue").innerText,



  •                 "TotalULTP":         document.getElementById("ulvalue").innerText,



  •                 };



  • str_CellInfo = JSON.stringify(CellInfo);//將CellInfo轉(zhuǎn)為字符串對(duì)象



  • PETInfo.CellInfo=str_CellInfo;//在PETInfo中添加名為Cellinfo的屬性，并賦值


2.json的發(fā)送

json寫(xiě)好后，發(fā)送給后臺(tái)。至于后臺(tái)怎么處理數(shù)據(jù)我們不關(guān)心。發(fā)送json的函數(shù)如下：

  • function post(path, params, method) {



  •         method = method || "post";



  •         var form = document.createElement("form");



  •         form.setAttribute("method", method);



  •         form.setAttribute("action", path);





  •         for (var key in params) {



  •                 if (params.hasOwnProperty(key)) {



  •                         var hiddenField = document.createElement("input");



  •                         hiddenField.setAttribute("type", "hidden");



  •                         hiddenField.setAttribute("name", key);



  •                         hiddenField.setAttribute("value", params[key]);



  •                         form.appendChild(hiddenField);



  •                 }



  •         }



  •         document.body.appendChild(form);



  •         form.submit();



  • }

    參數(shù)分別是后臺(tái)的地址，變量，方法。變量就是我們自己寫(xiě)好的json，方法默認(rèn)為post。例如我們想發(fā)剛剛的PETInfo

    $.post('http://10.140.160.64:3012/users/ueinfo', PETInfo);

    數(shù)據(jù)的發(fā)送、并獲取結(jié)果的實(shí)例：

    需求描述：用戶填寫(xiě)一系列的輸入框，前端獲取數(shù)據(jù)，封裝成json并發(fā)送給服務(wù)器，服務(wù)器會(huì)返回一個(gè)返回值，表示狀態(tài)。前端需要展示這個(gè)內(nèi)容提示客戶。

    • function sendBook(){



    •         var Book={



    •                 "openstackIP":document.getElementById("openstackIP").value,



    •                 "RAPName":document.getElementById("RAPName").value,



    •                 "RAPVer":document.getElementById("ver").value,



    •                 "OAMIP":document.getElementById("OAMIP").value



    •         };//json封裝用戶輸入的數(shù)據(jù)



    •         $.post('http://10.140.160.64:3012/servers/env/book', Book)//調(diào)用post傳輸數(shù)據(jù)



    •         .done((resp) => {//傳輸后獲取服務(wù)器的返回值



    •         alert(resp);//展示返回值



    •        // window.location.href = 'Environment-List.html';//選擇性界面跳轉(zhuǎn)



    •     });



    • }

    3.json在本地的存儲(chǔ)

    存儲(chǔ)數(shù)據(jù)有很多方法。這里我用的是localStorage。localStorage與cookie的區(qū)別如下：

    ① cookie在瀏覽器與服務(wù)器之間來(lái)回傳遞。
    sessionStorage和localStorage不會(huì)把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存

    ②數(shù)據(jù)有效期不同：
    cookie只在設(shè)置的cookie過(guò)期時(shí)間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉。
    sessionStorage：僅在當(dāng)前瀏覽器窗口關(guān)閉前有效。
    localStorage  始終有效，長(zhǎng)期保存。

    ③cookie數(shù)據(jù)還有路徑的概念，可以限制cookie只屬于某個(gè)路徑下。
    存儲(chǔ)大小也不同，cookie數(shù)據(jù)不能超過(guò)4k，sessionStorage和localStorage 雖然也有存儲(chǔ)大小的限制，但比cookie大得多，可以達(dá)到5M或更大。

    ④ 作用域不用
    sessionStorage不在不同的瀏覽器窗口中共享；
    localStorage在所有同源窗口中都是共享的；
    cookie也是在所有同源窗口中都是共享的；

    WebStorage 支持事件通知機(jī)制，可以將數(shù)據(jù)更新的通知發(fā)送給監(jiān)聽(tīng)者。Web Storage 的 api 接口使用更方便。

    用localstage存儲(chǔ)json的實(shí)例：

    • str_PETInfo=JSON.stringify(PETInfo);//將json轉(zhuǎn)為字符串對(duì)象



    • window.localStorage.setItem("PET",str_PETInfo);//存入本地，該json的key為PET


    將json取出來(lái)：



    • var PET=JSON.parse(window.localStorage.getItem("PET"));//將字符串轉(zhuǎn)化為json



    • var CellInfo=JSON.parse(PET.CellInfo);//json中的Cellinfo對(duì)象轉(zhuǎn)化為json



分享本文至：

日歷

鏈接

個(gè)人資料

存檔