黑马程序员技术交流社区

标题: 【上海校区】js json的格式、存储与发送 [打印本页]

---

作者: 梦缠绕的时候    时间: 2018-6-29 10:06
标题: 【上海校区】js json的格式、存储与发送
1.Json的格式

其实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,
  
  
• 
  
                  };
  
  
  

每个元素之间用逗号隔开。调用每个key的值可用语句。例如：CellInfo.UEAmunt，就可取出其中的值。

较为复杂的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

动态的往json只增加元素，增加对象。

前面说的几个都是静态的，提前写好的。那如果临时想加一个元素，例如在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转为字符串对象
  
  
• 
  
  PETInfo.CellInfo=str_CellInfo;//在PETInfo中添加名为Cellinfo的属性，并赋值
  
  
  

2.json的发送

json写好后，发送给后台。至于后台怎么处理数据我们不关心。发送json的函数如下：

• 
  
  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();
  
  
• 
  
  }
  
  
  

参数分别是后台的地址，变量，方法。变量就是我们自己写好的json，方法默认为post。例如我们想发刚刚的PETInfo

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

数据的发送、并获取结果的实例：

需求描述：用户填写一系列的输入框，前端获取数据，封装成json并发送给服务器，服务器会返回一个返回值，表示状态。前端需要展示这个内容提示客户。

• 
  
  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封装用户输入的数据
  
  
• 
  
          $.post('http://10.140.160.64:3012/servers/env/book', Book)//调用post传输数据
  
  
• 
  
          .done((resp) => {//传输后获取服务器的返回值
  
  
• 
  
          alert(resp);//展示返回值
  
  
• 
  
         // window.location.href = 'Environment-List.html';//选择性界面跳转
  
  
• 
  
      });
  
  
• 
  
  }
  
  
  

3.json在本地的存储

存储数据有很多方法。这里我用的是localStorage。localStorage与cookie的区别如下：

① cookie在浏览器与服务器之间来回传递。
sessionStorage和localStorage不会把数据发给服务器，仅在本地保存

②数据有效期不同：
cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
sessionStorage：仅在当前浏览器窗口关闭前有效。
localStorage  始终有效，长期保存。

③cookie数据还有路径的概念，可以限制cookie只属于某个路径下。
存储大小也不同，cookie数据不能超过4k，sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

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

WebStorage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。

用localstage存储json的实例：

• 
  
  str_PETInfo=JSON.stringify(PETInfo);//将json转为字符串对象
  
  
• 
  
  window.localStorage.setItem("PET",str_PETInfo);//存入本地，该json的key为PET
  
  
  

将json取出来：

• 
  
  var PET=JSON.parse(window.localStorage.getItem("PET"));//将字符串转化为json
  
  
• 
  
  var CellInfo=JSON.parse(PET.CellInfo);//json中的Cellinfo对象转化为json
  
  
  

---

作者: 梦缠绕的时候    时间: 2018-7-5 10:11

---

作者: 吴琼老师    时间: 2018-7-5 17:19

---

作者: 不二晨    时间: 2018-7-12 17:47
奈斯

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2