利用ajax生成网页内容附json及代码

{
    "soccerTeam":["皇家马德里","巴萨罗纳","摩纳哥","利物浦","拜仁"],
    "TeamName":[
        {
           "images":"./images/u=27395448,824507935&fm=26&gp=0.jpg",
           "introduce":"皇家马德里足球俱乐部（Real Madrid Club de Fútbol ，中文简称为皇马）是一家位于西班牙首都马德里的足球俱乐部，球队成立于1902年3月6日，前称马德里足球队。1920年6月29日，时任西班牙国王阿方索十三世把（西语，皇家之意）一词加于俱乐部名前，徽章上加上了皇冠，以此来推动足球运动在西班牙首都马德里市的发展。从此，俱乐部正式更名为皇家马德里足球俱乐部。"
        },
        {
            "images":"./images/u=27395448,824507935&fm=26&gp=0.jpg",
            "introduce":"巴塞罗那足球俱乐部（Fútbol Club Barcelona），简称巴萨（barça），是一家位于西班牙巴塞罗那市的足球俱乐部，西班牙足球甲级联赛传统豪门之一。1899年11月29日由瑞士人胡安·甘伯创立 [1]  。球队主场诺坎普球场可容纳接近十万名观众，是全欧洲最大及世界第二大的足球场。"
        },
        {
            "images":"./images/timg (21).jpg",
            "introduce":"摩纳哥足球俱乐部（Association Sportive de Monaco Football Club）是位于法国南部临地中海的摩纳哥公国的足球俱乐部，成立于1919年，在1948年转为职业球队，现时在法国甲组足球联赛中角逐。摩纳哥以外国球队的身份驰骋法甲战场，却成为法国赛场上最成功的球队之一，曾夺得八届甲组联赛冠军及五次法国杯。03-04赛季，在欧冠进入决赛对阵葡萄牙劲旅波尔图，创造了队内欧冠历史性的最好成绩"
        },
        {
            "images":"./images/timg (3).jpg",
            "introduce":"利物浦（Liverpool），英格兰西北部港口城市，英格兰八大核心城市之一，人口约为52万。利物浦是默西河畔都市郡的5个自治市之一，也是默西塞德郡（Merseyside）的首府，位于伦敦西北325公里，乘火车到伦敦需2小时40分钟。英国著名商业中心，也是第二大商港，利物浦腹地宽广，对外贸易占全国1/4。输出居英国首位，输入仅次于伦敦。曾经是英国著名的制造业中心，但是从1970年代起利物浦的船坞和传统制造业急剧衰落。"
        },
        {
            "images":"./images/tim(2).jpg",
            "introduce":"拜仁慕尼黑足球俱乐部（FC Bayern Munich），简称拜仁慕尼黑或拜仁，是一家设于巴伐利亚州首府慕尼黑的德国体育俱乐部，其最著名的是参加德国足球甲级联赛的职业足球队，曾创纪录的赢得28次德国足球顶级联赛冠军 [1]  及18次德国杯冠军 [2]  ，为德国最成功的足球俱乐部。"
        }
    ]
}

var section = document.querySelector(".section");
var list = document.querySelector(".section-list")
var requestURL="https://likaibei.github.io/web-item/json/content.json";
var xhr = new XMLHttpRequest();
xhr.open("GET",requestURL);
xhr.responseType="json";
xhr.send("");
xhr.onload=function(){
     var Team = xhr.response;
     Header(Team);
     showTeam(Team);
}
function Header(jsonObj){
    var soccerTeam = jsonObj['soccerTeam'];
    for (let index = 0; index <soccerTeam.length; index++) {
        var myli = document.createElement('li');
        myli.className='li';
        myli.innerHTML +=`<h1>${soccerTeam[index]}</h1>`;
        list.appendChild(myli);
    }
}
function showTeam(jsonObj){
    var introduces=jsonObj['TeamName'];
    for (let index = 0; index < introduces.length; index++){
        var mypic =document.createElement('img');
        var myP = document.createElement('p')
        myP.innerText=introduces[index].introduce;
        var myli =document.getElementsByClassName("li");
        mypic.src=introduces[index].images;
        myli[index].appendChild(mypic);
        myli[index].appendChild(myP);

    }
}

 

转载于:https://www.cnblogs.com/likaibei/p/10003454.html