1.Json的格式

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

較為簡單的json。里面只有簡單的對象，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,
  
• 
  
                  };
  

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

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

• 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]
  
  
• 
  
                  }
  
  
• 
  
          };
  

例如這個UEGroup1，里面的元素不僅有簡單的key+value，還包含了三個對象。對象里的元素用{}括起來，彼此之間用逗號隔開。想具體訪問某個元素的值也是通過逐層key，例如：UEGrooup1.DBR1.DLPackageSize

動態(tài)的往json只增加元素，增加對象。

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

CellInfo.number=10;

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

• var PETInfo = {};//聲明了一個空的對象
  
  
• 
  
  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)為字符串對象
  
  
• 
  
  PETInfo.CellInfo=str_CellInfo;//在PETInfo中添加名為Cellinfo的屬性，并賦值
  

2.json的發(fā)送

json寫好后，發(fā)送給后臺。至于后臺怎么處理數(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ù)分別是后臺的地址，變量，方法。變量就是我們自己寫好的json，方法默認(rèn)為post。例如我們想發(fā)剛剛的PETInfo

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

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

  需求描述：用戶填寫一系列的輸入框，前端獲取數(shù)據(jù)，封裝成json并發(fā)送給服務(wù)器，服務(wù)器會返回一個返回值，表示狀態(tài)。前端需要展示這個內(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在本地的存儲

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

  ① cookie在瀏覽器與服務(wù)器之間來回傳遞。
  sessionStorage和localStorage不會把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存
  
  ②數(shù)據(jù)有效期不同：
  cookie只在設(shè)置的cookie過期時間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉。
  sessionStorage：僅在當(dāng)前瀏覽器窗口關(guān)閉前有效。
  localStorage  始終有效，長期保存。
  
  ③cookie數(shù)據(jù)還有路徑的概念，可以限制cookie只屬于某個路徑下。
  存儲大小也不同，cookie數(shù)據(jù)不能超過4k，sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達(dá)到5M或更大。
  
  ④ 作用域不用
  sessionStorage不在不同的瀏覽器窗口中共享；
  localStorage在所有同源窗口中都是共享的；
  cookie也是在所有同源窗口中都是共享的；
  

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

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

  • str_PETInfo=JSON.stringify(PETInfo);//將json轉(zhuǎn)為字符串對象
    
    
  • 
    
    window.localStorage.setItem("PET",str_PETInfo);//存入本地，該json的key為PET
    
    
    

  將json取出來：

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