JavaScript读取JSON文件

旧城等待， 2022-05-29 00:38 224阅读 0赞

**JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。有关于json的相关信息，可参考：[json百度百科][json]。**

**1、HTML文档**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Read Json File</title>
    
        <link href="https://fonts.googleapis.com/css?family=Faster+One" rel="stylesheet">
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
    
    <header>
    
    </header>
    
    <section>
    
    </section>
    
    <script src="js/readJSON.js"></script>
    </body>
    </html>

**2、js文档：readJSON.js**

//获取<header>和</section>的引用
        let header = document.querySelector('header');
        let section = document.querySelector('section');
    
        //保存一个json文件访问的URL作为一个变量
        let requestURL = 'json/superheroes.json';
        //创建一个HTTP请求对象
        let request = new XMLHttpRequest();
        //使用open（）打开一个新请求
        request.open('GET', requestURL);
        //设置XHR访问JSON格式数据，然后发送请求
        // request.responseType = 'json';
        //设置XHR访问text格式数据
        request.responseType = 'text';
        request.send();
    
        //处理来自服务器的数据
        request.onload = function() {
            let superHeroesText = request.response;
            let superHeroes = JSON.parse(superHeroesText);
            // let superHeroes = request.response;
            populateHeader(superHeroes);
            showHeroes(superHeroes);
        };
    
        //对header进行定位
        function populateHeader(jsonObj) {
            let myH1 = document.createElement('h1');
            myH1.textContent = jsonObj['squadName'];
            header.appendChild(myH1);
    
            let myPara = document.createElement('p');
            myPara.textContent = 'Hometown: ' + jsonObj['hometown'] + ' //Formed: ' + jsonObj['formed'];
            header.appendChild(myPara);
        }
    
        function showHeroes(jsonObj) {
            //用heroers存储json文件里menbers的信息
            let heroes = jsonObj['members'];
    
            for (let i = 0; i < heroes.length; i++) {
                //创建一系列页面元素
                let myArticle = document.createElement('article');
                let myH2 = document.createElement('h2');
                let myPara1 = document.createElement('p');
                let myPara2 = document.createElement('p');
                let myPara3 = document.createElement('p');
                let 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:';
    
                let superPowers = heroes[i].powers;
                for(let j = 0; j < superPowers.length; j++) {
                    let 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);
            }
        }

**3、CSS文档：readJSONStyle.css**

html, body {
        margin: 0;
    }
    
    html {
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        height: 100%;
    }
    
    body {
        overflow: hidden;
        height: inherit;
    }
    
    h1 {
        font-size: 2rem;
        letter-spacing: -1px;
        position: absolute;
        margin: 0;
        top: -4px;
        right: 5px;
    
        color: transparent;
        text-shadow: 0 0 4px white;
    }

**4、json文件：heros.json**

{
      "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"
          ]
        }
      ]
    }

**实现效果：**

![Image 1][]

[json]: https://baike.baidu.com/item/JSON/2462549?fr=aladdin
[Image 1]: