JSON

轻量级数据交换格式，用独立的编程语言的文本格式存储和表达数据

JSON表达和解析时是一个对象，而XML是用户自定义标签存储数据

JSON文件内容可以是一个对象、数组，可以是对象+数组

JSON可写在js中，也可形成独立的.json文件

数据值：①简单值：可表字符串'  '，数组arr，boolean，null，但不支持undefined

              ②对象：{    }

 

              ③数组：[    ]

 

一）js中JSON表示方式

var productName = '牙刷';           //单值，不可undefined
var price = 199;
var data = {
    pId: '001'                        //对象中的key不可加引号
    pName: '水'
    pPrice: 1.5
}
var data2 = [10,'as',true,null]       //数组，只有字符串加'  '
var data3 = [
    {
        sno = '003'                         //数组里套对象
        sname = '张三'       
    }，
    {
        sno = '004'
        sname = '李四'
    }
]

二）js中JSON解析

直接访问JSON存储的变量即可

如果返回JSON格式的字符串，需将其解析为js识别的JSON，用JSON.parse()方法实现，JSON数据可直接访问

console.log(JSON.parse(student));         //JSON格式的转成JSON
console.log(JSON.stringify());            //JSON转成JSON格式的

解析作用：数据动态渲染到前端浏览器

var txt = ' ';
for (var I=0;i<student.length;i++){
    txt += '<li>' + student[i].name + '</li>'
};
document.getElementsByClassName('stu-list')[0].innerHTML = txt;

 

三）单独.json文件

所有key必须加"  "，不可'  '

:后面的只有字符串加"  "

数据不可赋给某个变量

在JSON中不可添加注释

JSON只是文本文件，不可出现js代码

实际开发中，如果后台为创建好接口，前台可以先mock假数据

数据最好分离出来，单独.json文件

"name": "mf-supplier-portal-management",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --port 9001",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint"
  },

四）单独.json文件解析

JSON必须用ajax（异步请求）获取

★异步请求：可同时进行其他请求

★如果发送ajax请求，须以http（服务器端）启动文件，不可本地直接打开

var xhr = new.XMLHttpRequest();              //创建请求对象
xhr.open('get', './student.json', true);     //请求，url，异步操作，，建立请求文件
xhr.onreadystatechange = function(){         //on事件，，前端对请求的结果进行处理
    if (xhr.readyState == 4 && xhr.status ==200){       //4为发送请求，200为请求成功
        console.log(JSON.parse(xhr.responseText))       //获取请求结果
    }
}
xhr.send();          //发送请求到后台