Question

作为html世界的入门者，我想知道并开始使用简单的API插入我的博客文章中。我试图将一些简单的API用作html值，例如：https://bitcoinfees.earn.com/api/v1/fees/recommended，并使用此处给出的示例：Display Json data in HTML table using javascript和其他一些更喜欢的示例：http://jsfiddle.net/sEwM6/258/

 $.ajax({
    url: '/echo/json/', //Change this path to your JSON file.
    type: "post",
    dataType: "json",
    //Remove the "data" attribute, relevant to this example, but isn't necessary in deployment.
    data: {
        json: JSON.stringify([
            {
            id: 1,
            firstName: "Peter",
            lastName: "Jhons"},
        {
            id: 2,
            firstName: "David",
            lastName: "Bowie"}
        ]),
        delay: 3
    },
    success: function(data, textStatus, jqXHR) {
        drawTable(data);
    }
});

function drawTable(data) {
    var rows = [];

    for (var i = 0; i < data.length; i++) {
        rows.push(drawRow(data[i]));
    }

    $("#personDataTable").append(rows);
}

function drawRow(rowData) {
    var row = $("<tr />")
    row.append($("<td>" + rowData.id + "</td>"));
    row.append($("<td>" + rowData.firstName + "</td>"));
    row.append($("<td>" + rowData.lastName + "</td>"));

    return row;
}

，但结果始终为空白。拜托，您能给我一些提示以使用API并将那个数字“ fastestFee”，“ halfHourFee”，“ hourFee”插入html值吗？

谢谢大家！

Answer 1

欢迎来到html世界。假设来自API的数据是使网站更具动态性的好方法，那么您肯定是对的。

在W3 Schools上有一个有关如何处理http请求的示例。我认为这是开始https://www.w3schools.com/xml/xml_http.asp的好地方。您创建一个执行某种数据获取的http对象。在此示例中，它是通过xhttp.send（）完成的。同时，您有一个侦听器，它监视xhttp的onreadystatechange属性是否已更改。如果该更改的状态为200（成功），则执行一些操作。这是我的JSfiddle，带有来自API的示例 http://jsfiddle.net/zvqr6cxp/

通常，这些操作是构造返回的数据，然后对数据进行某些操作，例如在表中显示它们。

该示例显示了与事件侦听器一起使用的本机html xhttp对象。通常，随着您对此知识的更多了解，您可能会开始使用诸如jquery或Angular之类的框架，该框架可以更平滑地处理http请求，此处的关键字是回调函数。

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       //In this example, I used your API link..first I would do is turn the JSON into a JS object
       myObject = JSON.parse(xhttp.responseText)

       document.getElementById("fast").innerHTML = myObject.fastestFee
       document.getElementById("half").innerHTML = myObject.halfHourFee
       document.getElementById("hour").innerHTML = myObject.hourFee
    }
};
xhttp.open("GET", "https://bitcoinfees.earn.com/api/v1/fees/recommended", true);
xhttp.send();

使用来自API响应的html中的数据

1 个答案: