Question

我想使用javascript在html表中显示json文件数据，我希望我可以开始这样做的方式。任何人都可以给我发送示例或教程来开始这样做。（使用javascript在HTML表格中显示Json URL数据）该表将有2列。

Answer 1

以下是一个例子：

我修改了现有的小提琴（http://jsfiddle.net/mjaric/sEwM6/）以提高效率。要了解有关jQuery中AJAX请求的更多信息，请参阅http://api.jquery.com/jQuery.ajax/。 AJAX请求可以在没有jQuery等库的帮助下完成，但对于初学者来说，使用jQuery会更容易。如果您正在寻求学习Javascript，我建议您查找纯Javascript AJAX请求以了解正在发生的事情（http://youmightnotneedjquery.com/#json）。

drawTable和drawRow函数用于将JSON数据写入表中。 jQuery也被用于将文本写入HTML页面。同样，这也可以在没有jQuery的情况下完成。请参阅http://youmightnotneedjquery.com/#setting_html。

$.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;
}

使用javascript在HTML表格中显示Json数据

1 个答案: