javascript - 表不接受 $.getJSON Javascript 中的任何类

Question

我正在尝试使用从 URL 获取的 json 数组创建一个表。

$.ajax({
    url:"https://api.coinmarketcap.com/v1/ticker/",
    method: "GET"

}).done(function(data) {

    document.write('<table class="table table-striped">');
    document.write('<tr><th>ID</tr></th>');

    for(var i = 0; i < 100; i++) {
        document.write('<tr><td>' + data[i].id + "</tr></td>");
    }

    document.write('<tr><th>PRICE</tr></th>');

    for(var i = 0; i < 100; i++) {
        document.write('<tr><td>' + data[i].price_usd + "</tr></td>");
    }

    document.write('</table>'); 
})

在控制台中，我看到正在创建表，但“表”类未注册。

如果我使用

function getJson(yourUrl){
    var Httpreq = new XMLHttpRequest(); // a new request
    Httpreq.open("GET",yourUrl,false);
    Httpreq.send(null);
    return Httpreq.responseText;          
}

var json = JSON.parse(getJson("https://api.coinmarketcap.com/v1/ticker/"))

并循环遍历变量 json 我可以使用该类并且它工作得很好，但是打开 Httpreq 似乎已被弃用，因为它是同步的。

Answer 1

使用innerHTML。

<div id="records"></div>

使用此代码100％工作

$.ajax({
   url:"https://api.coinmarketcap.com/v1/ticker/",
   method: "GET"

}).done(function(data) {
   var html = '';
   html +='<table class="table table-striped">';
   html +='<tr><th>ID</th><th>PRICE</th></tr>';
   for(var i = 0; i < 100; i++) {
     html +='<tr><td>' + data[i].id + '</td><td>' + data[i].price_usd + '</td></tr>';
   }
   html +='</table>';
   var container = document.getElementById('records');
   container.innerHTML = html;
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="records"></div>