JSON的概念及使用规则

最新推荐文章于 2024-05-29 17:38:35 发布

Unicorn-xueya.

最新推荐文章于 2024-05-29 17:38:35 发布

阅读量473

点赞数 2

本文链接：https://blog.csdn.net/xue_smail/article/details/89438723

版权

1、JSON(JavaScript Object Notation) ：JSON是一种轻量级的数据交换格式，基于ECMAScript的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
2、JSON数据书写格式：名称/值对；
3、JSON可以是数字、字符串、逻辑值、数组、对象、null；
数字(整数或浮点数)： {“age”:30};
对象(在大括号中)：{“name”:“xue”,“url”:“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);
            }
        };
    }

Unicorn-xueya.

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JSON的概念及使用规则

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

扫一扫