JSON基础

时间 2021-08-14

标签 javascript html java git github json 数组网络 app ide 栏目 JavaScript 繁體版

原文原文链接

目录javascript

什么是JSON
JSON结构
JSON对象的访问
注意事项
JSON示例

什么是JSON

JSON 是一种按照JavaScript对象语法的数据格式，由 Douglas Crockford 推广。虽然它是基于 JavaScript 语法，但它独立于JavaScript，这也是为何许多程序环境可以读取（解读）和生成 JSON。html

JSON能够做为一个对象或者字符串存在，前者用于解读 JSON 中的数据，后者用于经过网络传输 JSON 数据。 JavaScript 提供一个全局的可访问的 JSON 对象来对这两种数据进行转换。java

一个 JSON 对象能够被储存在它本身的文件中，这基本上就是一个文本文件，扩展名为 .json，还有 MIME type 用于 application/json.git

JSON结构

JSON从JS获取灵感，天然能够想象到它和JS对象结构上的类似，示例以下：github

{
  "squadName" : "Super hero squad",
  "homeTown" : "Metro City",
  "formed" : 2016,
  "secretBase" : "Super tower",
  "active" : true,
  "members" : [
    {
      "name" : "Molecule Man",
      "age" : 29,
      "secretIdentity" : "Dan Jukes",
      "powers" : [
        "Radiation resistance",
        "Turning tiny",
        "Radiation blast"
      ]
    },
    {
      "name" : "Madame Uppercut",
      "age" : 39,
      "secretIdentity" : "Jane Wilson",
      "powers" : [
        "Million tonne punch",
        "Damage resistance",
        "Superhuman reflexes"
      ]
    },
    {
      "name" : "Eternal Flame",
      "age" : 1000000,
      "secretIdentity" : "Unknown",
      "powers" : [
        "Immortality",
        "Heat Immunity",
        "Inferno",
        "Teleportation",
        "Interdimensional travel"
      ]
    }
  ]
}

能够看出它由属性名:属性值组成，每一个数据用,隔开。json

JSON对象也能够是一个数组：数组

[
  {
    "name" : "Molecule Man",
    "age" : 29,
    "secretIdentity" : "Dan Jukes",
    "powers" : [
      "Radiation resistance",
      "Turning tiny",
      "Radiation blast"
    ]
  },
  {
    "name" : "Madame Uppercut",
    "age" : 39,
    "secretIdentity" : "Jane Wilson",
    "powers" : [
      "Million tonne punch",
      "Damage resistance",
      "Superhuman reflexes"
    ]
  }
]

//访问方式示例
[0]["powers"][0]

JSON对象的访问

JSON对象的访问与JS对象访问方式一致，由.和[]访问。对于复杂的数据能够采用链式访问，示例以下：网络

superHeroes["members"][1]["powers"][2]

注意事项

JSON 是一种纯数据格式，它只包含属性，没有方法。
JSON要求在字符串和属性名称周围使用双引号。单引号无效。甚至一个错位的逗号或分号就能够致使 JSON 文件出错。
JSON 能够将任何标准合法的 JSON 数据格式化保存，不仅是数组和对象。好比，一个单一的字符串或者数字能够是合法的 JSON 对象。
与 JavaScript 代码中对象属性能够不加引号不一样，JSON 中只有带引号的字符串能够用做属性。

JSON示例

访问某网页请求JSON数据，获得后进行处理并显示。app

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON Test</title>
    <style>

    </style>
</head>

<body>
    <header>
    </header>

    <section>
    </section>
</body>
<script>
    var header = document.querySelector('header');
    var section = document.querySelector('section');
    var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';

    //建立一个HTTP请求对象
    var request = new XMLHttpRequest();
    //打开一个新的请求 参数：HTTP方法，URL
    request.open('GET', requestURL);
    //设置返回的数据格式，发送请求
    request.responseType = 'json';
    request.send();
    //处理返回的数据，请求对象load事件只在请求成功时触发
    request.onload = function() {
        var superHeroes = request.response;
        populateHeader(superHeroes); //填充header
        showHeroes(superHeroes); //填充section
    }

    //定位header
    function populateHeader(jsonObj) {
        var myH1 = document.createElement('h1');
        myH1.textContent = jsonObj['squadName'];
        header.appendChild(myH1);

        var myPara = document.createElement('p');
        myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed'];
        header.appendChild(myPara);
    }

    //建立英雄信息卡片
    function showHeroes(jsonObj) {
        var heroes = jsonObj['members'];

        for (i = 0; i < heroes.length; i++) {
            var myArticle = document.createElement('article');
            var myH2 = document.createElement('h2');
            var myPara1 = document.createElement('p');
            var myPara2 = document.createElement('p');
            var myPara3 = document.createElement('p');
            var myList = document.createElement('ul');

            myH2.textContent = heroes[i].name;
            myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
            myPara2.textContent = 'Age: ' + heroes[i].age;
            myPara3.textContent = 'Superpowers:';

            var superPowers = heroes[i].powers;
            for (j = 0; j < superPowers.length; j++) {
                var listItem = document.createElement('li');
                listItem.textContent = superPowers[j];
                myList.appendChild(listItem);
            }

            myArticle.appendChild(myH2);
            myArticle.appendChild(myPara1);
            myArticle.appendChild(myPara2);
            myArticle.appendChild(myPara3);
            myArticle.appendChild(myList);

            section.appendChild(myArticle);
        }
    }
</script>

</html>

若是返回的数据并不是JSON对象，而是字符串，则处理以下：ide

parse(): 以文本字符串形式接受JSON对象做为参数，并返回相应的对象。
stringify(): 接收一个对象做为参数，返回一个对应的JSON字符串。

request.open('GET', requestURL);
request.responseType = 'text'; // now we're getting a string!
request.send();

request.onload = function() {
  var superHeroesText = request.response; // get the string from the response
  var superHeroes = JSON.parse(superHeroesText); // convert it to an object
  populateHeader(superHeroes);
  showHeroes(superHeroes);
}

反过来若是咱们想把json对象转为字符串，则处理以下：

var myJSON = { "name" : "Chris", "age" : "38" };
var myString = JSON.stringify(myJSON);