JSON的概念及使用规则

向右看齐 2022-02-16 05:01 219阅读 0赞

1、JSON(JavaScript Object Notation) ：JSON是一种轻量级的数据交换格式，基于ECMAScript的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。  
2、JSON数据书写格式：名称/值对；  
3、JSON可以是数字、字符串、逻辑值、数组、对象、null；  
数字(整数或浮点数)： \{“age”:30\};  
对象(在大括号中)：\{“name”:“xue”,“url”:“[http://www.kgc.cn/][http_www.kgc.cn]”\};  
数组(在中括号中)：\{“sites”:\[\{“name”:“xue”,“password”,123456\}, \{“name”:“google”,“password”:147258\}\]\};  
逻辑值(true或false)：\{“flag”:true\};  
null：\{“kgc”：null\}；

下面是用json文件随机获取图片的例子！

json文件：（success.json）
    
    {
        "status": "0",
        "message": "success",
        "data": {
            "title": "请认真对待考试,随机选取其中一张图片",
            "content": [
                {
                    "id": "001",
                    "name":"第一张图片",
                    "src":"img/11.jpg"
                },
                {
                    "id": "002",
                    "name":"第二张图片",
                    "src":"img/22.jpg"
                },
                {
                    "id": "003",
                    "name":"第三张图片",
                    "src":"img/33.jpg"
                },
                {
                    "id": "004",
                    "name":"第四张图片",
                    "src":"img/44.jpg"
                },
                {
                    "id": "005",
                    "name":"第五张图片",
                    "src":"img/55.jpg"
                }
            ]
        }
    }

内容：
    <body>
    <h3 id="title"></h1>
    <button id="btn">点击显示随机图片</button>
    <p id="names"></p>
    <img src="" id="image">
    </body>

script：
    <script type="text/javascript" src="ajax.js"></script>
    <script type="text/javascript">
     var arr = [];
     function num(m,n){
      var num = Math.round(Math.random() * (n - m) + m); //获取随机数
      return num;
     };
     //ajax作用：传输数据和获取数据；
     ajax({
      "url":"success.json", //路径；
      "method":"get",   //方法；
      "success":function(response){ //成功之后的返回值；
       var data = JSON.parse(response); //拿过来数组
        // console.log(data);
        title.innerHTML = data.data.title;//将json文件的title添加到网页的title
        arr = data.data.content;   //将json文件中的content中的内容给数组
        // console.log(arr);
        btn.onclick = function(){
         // console.log(arr[num(0,arr.length-1)]); //随机下标
         names.innerHTML = arr[num(0,arr.length-1)].name; //根据下标找随机名字
         image.src = arr[num(0,arr.length-1)].src; //根据下标找随机路径
        }
      }
     })
    </script>

ajax文件：（ajax.js）
    function ajax(opt) {
            opt = opt || {};
            opt.method = opt.method.toUpperCase() || 'POST';
            opt.url = opt.url || '';
            opt.async = opt.async || true;
            opt.data = opt.data || null;
            opt.success = opt.success || function () {};
            var xmlHttp = null;
            if (XMLHttpRequest) {
                xmlHttp = new XMLHttpRequest();
            }
            else {
                xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
            }var params = [];
            for (var key in opt.data){
                params.push(key + '=' + opt.data[key]);
            }
            var postData = params.join('&');
            if (opt.method.toUpperCase() === 'POST') {
                xmlHttp.open(opt.method, opt.url, opt.async);
                xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
                xmlHttp.send(postData);
            }
            else if (opt.method.toUpperCase() === 'GET') {
                xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async);
                xmlHttp.send(null);
            } 
            xmlHttp.onreadystatechange = function () {
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    opt.success(xmlHttp.responseText);
                }
            };
        }

[http_www.kgc.cn]: http://www.kgc.cn/