json运用

基于我之前做的关于羽毛球的网页，我添加了按钮事件，将一些文字内容移到 json 里面，将 json 数据上传到了github上 https://github.com/2829354693/json/blob/master/match.json在点击查看详情按钮后从github上获取数据并显示到页面上：<!DOCTYPE html><html&g...

吃素的小动物

48人浏览 · 2018-11-25 20:08:00

吃素的小动物 · 2018-11-25 20:08:00 发布

基于我之前做的关于羽毛球的网页，我添加了按钮事件，将一些文字内容移到 json 里面，将 json 数据上传到

了github上 https://github.com/2829354693/json/blob/master/match.json

在点击查看详情按钮后从github上获取数据并显示到页面上：

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>赛事聚焦</title>
   <link rel="stylesheet" href="css/style.css">
</head>
<body>
   <div class="words"><i>badminton</i></div>
   <div class="match"><i>赛事聚焦</i></div>
   <br><br><br><br>
   <hr size="20px" color="#DC143C">
   <div class="first">
       <a href="index.html">回到首页</a>
   </div>
   <div class="match1">
       <div>因左膝伤势影响李雪芮退出日本羽球公开赛:<br>
           <button οnclick="a()">查看详情</button>
           <span id="a"></span>
       </div>
   </div>
   <div class="match2">
       <div>汤尤杯分组结果揭晓中日对决战将提前上演:<br>
           <button οnclick="b()">查看详情</button>
           <span id="b"></span>
       </div>
       <img src="images/twelve.jpg" alt="picture">
       <p id="c"></p>

   </div>
   <div class="match3">
       <div>丹麦羽毛球公开赛即将开战，丹麦赛纪念衫发布:<br>
           <button οnclick="c()">查看详情</button>
           <span id="d"></span>
           <br>
       <img src="images/thirteen.jpg" alt="picture" width="500px" height="300px">
       <p id="e"></p>
       <img src="images/one.gif" alt="gif" width="500px" height="300px">

       </div>

   </div>

   <script type="text/javascript">
       var requestURL = 'https://github.com/2829354693/json/blob/master/match.json';
       var request = new XMLHttpRequest();
       request.open('GET',requestURL);
       request.responseType = 'json';
       request.send();
       request.onload = function(){
           var JSONObject = request.response;
       }
       var isclick1=false;
       function a(){
           if (isclick1==false) {
           document.getElementById('a').innerHTML=JSONObject.a;
               isclick1=true;
            }
           else{
               document.getElementById('a').innerHTML="";
               isclick1=false;
           }
       }

       var isclick2=false;
       function b(){
           if (isclick2==false) {
           document.getElementById('b').innerHTML=JSONObject.b;
           document.getElementById('c').innerHTML=JSONObject.c;
               isclick2=true;
            }
           else{
               document.getElementById('b').innerHTML="";
               document.getElementById('c').innerHTML="";
               isclick2=false;
           }
       }

       var isclick3=false;
       function c(){
           if (isclick3==false) {
           document.getElementById('d').innerHTML=JSONObject.d;
           document.getElementById('e').innerHTML=JSONObject.e;
               isclick3=true;
            }
           else{
               document.getElementById('d').innerHTML="";
               document.getElementById('e').innerHTML="";
               isclick3=false;
           }
       }

   </script>
</body>
</html>