• 运用json文件传输数据


    可以自己先编写一个随意的测试的Html文件

    接下来的js解析json代码如下:

    <script type="text/javascript">
    var header = document.querySelector('header');
    var section = document.querySelector('section');
    var requestURL = 'https://wxflal.github.io/study/filmname.json';
    var request = new XMLHttpRequest();
    request.open('GET', requestURL);
    request.responseType = 'json';
    request.send();
    request.onload = function() {
    var file = request.response;
    showone(file);
    showtwo(file);
    }

    function showone(jsonObj) {
    var myH1 = document.createElement('h1');
    myH1.textContent = jsonObj['squadName'];
    header.appendChild(myH1);
    var myPara = document.createElement('p');
    myPara.textContent = 'editor:' + jsonObj['editor'] + ' // hometown: ' + jsonObj['hometown'] + ' // active:' + jsonObj['active'];
    header.appendChild(myPara);
    }

    function showtwo(jsonObj){
    var filemembers = jsonObj['films'];

    for (var i = 0; i < filemembers.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 = filemembers[i].name;
    myPara1.textContent = 'time: ' + filemembers[i].time;
    myPara2.textContent = 'writer: ' + filemembers[i].writer;
    myPara3.textContent = 'moral:';

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

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

    section.appendChild(myArticle);
    }
    }

    </script>

    json代码地址:https://wxflal.github.io/study/filmname.json

    运行结果尚未进行css布局,只用于测试解析json文件的js代码,显示解析数据结果而已

  • 相关阅读:
    如何在VIM中编辑并保存退出!!!
    MapReduce---数据清洗
    构建之法阅读笔记03
    人月神话阅读笔记03
    学习进度报告16
    大道至简阅读笔记03
    大道至简阅读笔记02
    个人总结
    大道至简阅读笔记01
    学习进度报告15
  • 原文地址:https://www.cnblogs.com/ylsunnny/p/10017729.html
走看看 - 开发者的网上家园