html JS.JSON.FetchingData.XHR.Fetch.ex1

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html JS.JSON.FetchingData.XHR.Fetch.ex1相关的知识，希望对你有一定的参考价值。

.table td
{
  border:1px solid black ;
  spacing:5px;
  
}
.table tr:nth-child(even)
{
  background-color:lightblue;
}

.table tr:hover
{
  background-color:yellow;
}
.table
{
  border-spacing:5px;
}
var url='https://gist.githubusercontent.com/heiswayi/7fde241975ed8a80535a/raw/ff1caaeaf62bd6740ab7cafcd61f1215de173379/datatables-data.json';
var buttonXHR,buttonFetch , div ;
var table;

window.onload=init;


function init()
{
  buttonXHR=document.querySelector('#buttonXHR') ;
  buttonFetch=document.querySelector('#buttonFetch') ;
  div=document.querySelector('#container') ;
}

function getDataXHR()
 {
   var xhr=new XMLHttpRequest() ;
   xhr.open('GET',url,true) ;
   xhr.onload=function(e)
    {
      var response=this.response ;
      var obj=JSON.parse(response) ;
      createTable(obj,'created using XHR class');
    };
   xhr.onerror=function(error)
   {
     console.log('Error '+ error) ;
   }
   xhr.send(); 
 }


function getDataFetch()
 {
   fetch(url)
            .then(function(response)
                 {
                    return response.json();
                 })
           .then(function(data)
                {
                  createTable(data,'created using Fetch API');
                })
           .catch(function(error)
                 {
                     console.log('Error :'+ error.message);
                })
 }

function createTable(obj,method)
{
  removeTable();
  table= document.createElement('table') ;
  table.classList.add('table');
  var caption=table.createCaption() ;
  caption.innerHTML=method;
  var len=obj.data.length ;
  
  for(var i=0;i<len;i++)
     {
       var row=table.insertRow() ;
       var  cells=obj.data[i].length;
       for(var x=0;x<cells;x++)
         {
           var cell=row.insertCell() ;
           var txt=obj.data[i][x];
           
           cell.innerHTML=txt;
         }
     }
 div.appendChild(table) ;
}

function removeTable()
 {
   
   if(table!==undefined)
     {
       div.removeChild(table); 
     }
  
 }



JS.JSON.FetchingData.XHR.Fetch.ex1
----------------------------------


A [Pen](https://codepen.io/Onlyforbopi/pen/GYKmJv) by [Pan Doul](https://codepen.io/Onlyforbopi) on [CodePen](https://codepen.io).

[License](https://codepen.io/Onlyforbopi/pen/GYKmJv/license).
<html>
   <head>
  </head>
  <body>
    <label for="buttonXHR">Get Data XHR</label>
    <button id="buttonXHR" onclick="getDataXHR();">Click XHR</button>
    
    <br>
    <br>
    <label for="buttonFetch">Get Data Fetch</label>
    <button id="buttonFetch" onclick="getDataFetch();">Click Fetch</button>
    
    <div id="container">
    </div>
  </body>
</html>

以上是关于html JS.JSON.FetchingData.XHR.Fetch.ex1的主要内容，如果未能解决你的问题，请参考以下文章

html JS.JSON.FetchingData.PopulateTable.ex4

html JS.JSON.FetchingData.PopulateTable.ex9

html JS.JSON.FetchingData.PopulateTable.ex8

html JS.JSON.FetchingData.PopulateTable.ex7

html JS.JSON.FetchingData.PopulateTable.ex6

html JS.JSON.FetchingData.PopulateTable.ex5