如何从 JSON AJAX 绘制表格 - JavaScript

简介

在本文中，我们将学习如何使用 JavaScript 和 AJAX 从 JSON 数据中绘制表格。

我们将通过以下步骤来实现这一过程：

1. 从服务器上获取 JSON 数据，
2. 解析 JSON 数据，
3. 将数据插入 HTML 表格中。

获取 JSON 数据

首先，我们需要从服务器获取 JSON 数据。为此，我们将使用 AJAX。以下是一个 AJAX 请求的示例代码：

$.ajax({
    type: "GET",
    url: "https://example.com/data.json",
    dataType: "json",
    success: function(data) {
        console.log(data);
    },
    error: function(xhr, status, error) {
        console.log(xhr);
    }
});

在上面的代码中，我们使用了 jQuery 库中的 $.ajax() 方法来进行 AJAX 请求。我们将 type 参数设置为 GET，这意味着我们将从服务器获取数据。url 参数指定要请求的 URL。dataType 参数告诉 jQuery 我们期望服务器返回的数据类型是 JSON。success 回调会在请求成功时被调用，而 error 回调会在请求发生错误时被调用。

解析 JSON 数据

一旦我们获得了 JSON 数据，下一步是解析它。为此，我们将使用 JSON.parse() 方法。以下是一个示例代码：

var jsonData = '{"name":"John", "age":30, "city":"New York"}';
var obj = JSON.parse(jsonData);

console.log(obj.name); // 输出 "John"

在上面的代码中，我们将 JSON 数据的字符串表示存储在 jsonData 变量中。我们然后使用 JSON.parse() 方法将字符串转换为 JavaScript 对象。最后，我们将 JavaScript 对象中的 name 属性打印到控制台上。这将输出 John。

插入数据到 HTML 表格中

接下来，我们需要将数据插入 HTML 表格中。以下是创建表格的示例代码：

var table = $('<table>').addClass('table');

var header = $('<thead>').append(
    $('<tr>').append(
        $('<th>').text('名字'),
        $('<th>').text('年龄'),
        $('<th>').text('城市')
    )
);

var body = $('<tbody>');

table.append(header);
table.append(body);

$('body').append(table);

在上面的代码中，我们使用 jQuery 创建了一个表格元素。我们添加表头和表身元素，并将它们附加到表格中。然后，我们将整个表格元素附加到 body 中。

接下来，我们需要将 JSON 数据转换为 HTML 表格行。以下是一个示例代码：

var data = [
    {"name": "John", "age": 30, "city": "New York"},
    {"name": "Mary", "age": 25, "city": "Los Angeles"},
    {"name": "Bob", "age": 50, "city": "Chicago"}
];

$.each(data, function(index, value) {
    var row = $('<tr>').append(
        $('<td>').text(value.name),
        $('<td>').text(value.age),
        $('<td>').text(value.city)
    );
  
    body.append(row);
});

在上面的代码中，我们使用一个示例数据数组 data 模拟 JSON 数据。我们使用 jQuery 的 $.each() 方法迭代 JSON 对象中的每个元素。对于每个元素，我们将其转换为表格行，并将其添加到表身元素中。

完整代码

最后，让我们将所有代码组合在一起。在以下代码中，我们将使用 AJAX 获取 JSON 数据，解析它，然后将它插入到 HTML 表格中：

$.ajax({
    type: "GET",
    url: "https://example.com/data.json",
    dataType: "json",
    success: function(data) {
        var table = $('<table>').addClass('table');

        var header = $('<thead>').append(
            $('<tr>').append(
                $('<th>').text('名字'),
                $('<th>').text('年龄'),
                $('<th>').text('城市')
            )
        );

        var body = $('<tbody>');

        $.each(data, function(index, value) {
            var row = $('<tr>').append(
                $('<td>').text(value.name),
                $('<td>').text(value.age),
                $('<td>').text(value.city)
            );

            body.append(row);
        });

        table.append(header);
        table.append(body);

        $('body').append(table);
    },
    error: function(xhr, status, error) {
        console.log(xhr);
    }
});

结论

在本文中，我们学习了如何使用 JavaScript 和 AJAX 从 JSON 数据中绘制表格。我们使用 AJAX 获取数据，将其解析为 JavaScript 对象，然后使用 jQuery 手动创建 HTML 表格，并将数据插入其中。