json

  1. //对象
  2. var obj = {
  3. d: function () {
  4. console.log(this.a+this.b+this.c);
  5. },
  6. a: 1,
  7. b: 2,
  8. c: 3,
  9. /* d: function () {
  10. console.log(this.a+this.b+this.c);
  11. }*/
  12. }
  13. obj.d()//6

无序排列
利用对象的无序性,不受顺序影响,方法顺序影响

  1. function Test(opt) {
  2. this.name=opt.name;
  3. this.age=opt.age;
  4. this.height=opt.height;
  5. }
  6. var test={
  7. height:'',
  8. age:'',
  9. name:''
  10. }

加双引号依然可以,执行,本来就应该有引号的,加单双引号都可以,加不加都可以

  1. var obj = {
  2. "a": 1,
  3. "b": 2,
  4. "c": 3,
  5. "d": function () {
  6. console.log(this.a+this.b+this.c);
  7. }
  8. }
  9. obj.d()//6

JSON->JavaScript Object Notation
JSON->数据交互->轻量
因为json是干数据交互的,所以就不可能有方法,因为是数据型的交互

JSON数据一定是个对象,但JavaScript的对象不一定是json数据,因为JSON没有方法

所有编程语言都离不开的三大数据类型
scalar标量->字符串和数字
sequence序列->数组和列表 list array
mapping映射->键值对 键名:键值 (方法名:方法内容?)

json格式

映射用冒号隔开
“name”:”张三”

并列数据用逗号隔开
“name”:”张三”,
age:18

映射的集合用{}包裹
{“name”:”张三”,
age:18 }
键名一定要用双引号””,但引号不行

json就是从对象来的,但json又是自己的一种数据的格式,所以做出了规定,规定加上双引号

并列数据集合用[]包裹
[{“name”:”张三”,
age:18 },
{“name”:”张三”,
age:18 }]

json的由来

最早期是用xml交互的,

  1. <person>
  2. <username>张三</username>
  3. <age>25</age>
  4. </person>
  5. <person>
  6. <username>李四</username>
  7. <age>18</age>
  8. </person>

缺点:文档大,不易读,前后端解析比较困难
image.png

例子

微信开发平台
json
image.png

xml,服务器与服务器交互时后端

image.png

  1. <div data-config="{'name':'张三','age':25}"></div>
  2. <script !src="">
  3. var oDiv=document.getElementsByTagName('div')[0];
  4. var info=oDiv.getAttribute('data-config');
  5. console.log(oDiv);
  6. console.log(info);
  7. var jsonData=JSON.parse(info);
  8. console.log(jsonData);
  9. </script>

image.png
必须是双引号,”name”

  1. <div data-config='{"name":"张三","age":25}'></div>
  2. <script !src="">
  3. var oDiv=document.getElementsByTagName('div')[0];
  4. var info=oDiv.getAttribute('data-config');
  5. console.log(oDiv);
  6. console.log(info);
  7. var jsonData=JSON.parse(info);
  8. console.log(jsonData);
  9. </script>

image.png

  1. <div></div>
  2. <script !src="">
  3. var oDiv = document.getElementsByTagName('div')[0];
  4. var obj = {
  5. name: '李四',
  6. age: 18
  7. }
  8. oDiv.setAttribute('data-info', obj);
  9. </script>

image.png
obj对象不能写入属性,需要变成字符串,变成json

  1. <div></div>
  2. <script !src="">
  3. var oDiv=document.getElementsByTagName('div')[0];
  4. var obj={
  5. name:'李四',
  6. age:18
  7. }
  8. var str=JSON.stringify(obj);
  9. console.log(str);
  10. oDiv.setAttribute('data-info',str);
  11. </script>

image.png

websocket通讯,之后会把做聊天应用的经验告诉的
经验,代码的具体应用,实现

实战

php返回的数据,后端返回的数据,未经前端处理
image.png

后端返回的数据,经过前端处理后的样子
image.png
一定是用字符串交互的,因为json对象是JavaScript对象,obj也是JavaScript对象,后端语言java、php、go不认识js对象,它们不兼容js对象,所以商量一个规范,发一个双方都懂的,字符串双方都懂

打印一下后端发过来的数据,得到字符串,不是对象
image.png

image.png

把data转换成json对象
image.png
image.png

作业

image.png
做个这个用dom知识
图片,data数据给了,做成这样
不管大小做成什么样,做成意思一模一样