JSON基础知识与实战，从服务器端获取JSON数据的方法--2019年5月16日

JSON简介
1. JAVAScript Object Notation是一种轻量级的数据交换格式
2. 具有良好的可读和便于快速编写的特性。
3. 业内主流技术为其提供了完整的解决方案（有点类似于正则表达式 ，获得了当今大部分语言的支持）
4. JSON采用兼容性很高的文本格式，同时也具备类似于C语言体系的行为。
5. JSON是目前网络中主流的数据传输格式之一，应用十分广泛。

JSON支持的数据类型
我们要学习使用JSON解析，必须对JSON解析的规则原理有深刻的认识和了解，然后才知道它的一个实现原理
JSON里面的数据是以一种键值对的方式存在
（”key”:”value”）中值的类型可以是下面数据类型中的任意一种：
1. 数字（整数或浮点数）
2. 逻辑值（true 或 false）
3. 字符串（在双引号中）
4. null
5. 数组（在方括号中）
6. 对象（在大括号中）

JSON语法规则
JSON的语法规则非常的简单，就是使用
大括号’{}’，
中括号’[]’，
逗号’，’，
冒号’：’，
双引号’“”’。

我们在JSON解析中只有三中情况出现
1.｛｝ 解析’大括号’类型
2. [ ] 解析’中括号’类型
3. 其实只有两种，第三种则是1与2的组合方法，即”｛’name’:’李文豪’ ，’hobby’:[‘编程’,’电竞’,’睡觉’]｝”

JSON基本语法
Object(对象类型)
用{ }包含一系列无序的key–Value键值对表示，其中Key和Value之间用冒号分割，每个key-value之间用逗号分割。
比如：

    `json{
        "jsonObj" : { "name" : "李文豪","age" : 24}
    }`

Array(数组类型)
使用[ ]包含所有元素，每个元素用逗号分隔，元素可以是任意的值
比如：

    `json {
        "jsonArr" : ["编程","电竞","睡觉"]
    ｝`

组合形

    `json {
        "name" : "李文豪",
        "age" : 24,
        "jsonObj" : { "name" : "李文豪","age" : 24},
        "jsonArr" : ["编程","电竞","睡觉"]
    }`

 
注意事项:
1. JSON的值必须是字面量形式, 不允许使用变量或其它形式
2. JSON中不允许直接写注释
3. JSON格式的文本,文件后缀必须是: `json`
4. JSON文本的MIME类型必须是: `application/json`

JSON实战练习
从服务器端获取JSON格式字符串并在前端页面中显示

JavaScript代码

    let btn = document.getElementsByTagName('button').item(0);    
    let request = new XMLHttpRequest();
    btn.addEventListener('click', getData, false);
    function getData() {        
        request.addEventListener('readystatechange', show, false);        
        request.open('get', 'admin/demo1.php', true);        
        request.send(null);    
    }
    function show() {        
        if (request.readyState === 4) {            
            var h3 = document.getElementsByTagName('h3').item(0);
            var obj = JSON.parse(request.responseText);
            h3.innerHTML = obj.name + ',PHP成绩是: ' + obj.grade.php + ',最喜欢: ' + obj.hobby[1];
        }
    }

 

表单验证之JSON方式数据传递

JavaScript代码

function F_verify($user_Info, $result_Tip) {    
    request_Temp.onreadystatechange = function(){
        if (request_Temp.readyState === 4 && request_Temp.status === 200) {            
            let obj = JSON.parse(request.responseText);                
            switch (obj.status) {
                case 1:
                    $result_Tip.style.color = 'red';
                    $result_Tip.innerHTML = obj.message;
                    break;
                case 2:
                    $result_Tip.style.color = 'red';
                    $result_Tip.innerHTML = obj.message;
                    break;
                case 3:
                    $result_Tip.style.color = 'green';
                    $result_Tip.innerHTML = obj.message;
                    break;
            }
        }
        return false;
    };
    request_Temp.open('post','admin/check.php',true);
    request_Temp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    let request_Temp = new XMLHttpRequest();
    request_Temp.send(data_Temp);
}