當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript读取JSON文件
生活随笔
收集整理的這篇文章主要介紹了
JavaScript读取JSON文件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
JSON 是 JS 對象的字符串表示法，它使用文本表示一個 JS 對象的信息，本質是一個字符串。有關于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"]}] }實現效果：
?
?
總結
以上是生活随笔為你收集整理的JavaScript读取JSON文件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 数字图像处理频域滤波实现低通与高通滤波（
- 下一篇： minio 文件服务器,5分钟解决Spr