Question

我正在使用jQuery和AJAX一个.json文件并将其显示在引导表中。我已经能够在我的html文件中为表创建一个模板。我拥有的.json文件是本地文件，但我不确定如何在表格中显示它。我刚开始，并阅读有关如何编写代码的教程。以下是我到目前为止的情况：

这是我的html文件中的内容

<!DOCTYPE html>
<html lang = "en">
<head>

    <link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<body>
    <div class = "container">

        <table table id = "table" data-url="students.json">
            <thead>
                <tr>
                    <th data-field = "fname">First Name</th>
                    <th data-field = "lname">Last Name</th>
                    <th data-field = "startDate">Start Date</th>
                    <th data-field = "street">Street</th>
                    <th data-field = "city">City</th>
                    <th data-field = "state">State</th>
                    <th data-field = "zip">Zip Code</th>
                    <th data-field = "phone">Phone</th>
                    <th data-field = "year">Year</th>
                </tr>
            </thead>
        </table>
    </div>
</body>
</html>

这是json文件中数据类型的片段。

{
    "fname": "Lois",
    "lname": "Hanson",
    "startDate": "3/12/93",
    "street": "923 North 1400 East",
    "city": "Williamsburg",
    "state": "ID",
    "zip": 93673,
    "phone": "673-3114",
    "year": 4
},

我是否可以在html文件中编写所有代码？

Answer 1

您需要进行Character.isDefined调用才能获取本地json文件。解析它并将其绑定到ajax元素。在你的情况下是html。

table

将上述代码包装到$.ajax({ url: 'students.json', type: 'get', dataType: 'json', error: function(data){ }, success: function(data){ $('#table').append(data); } });函数中，并确保它在javascript的加载时执行。

Answer 2

首先在您的目录中创建一个JavaScript文件并附加到Html文件，然后将以下代码包装在此文件中：

$( document ).ready(function() {
    $.ajax({
        url: 'students.json',
        type: 'get',
        dataType: 'json',
        error: function(data){
        },
        success: function(data){
            var tr = $('<tr>');
            tr.append('<td>' + data.fname + '<td>');
            tr.append('<td>' + data.lname + '<td>');
            tr.append('<td>' + data.startDate + '<td>');
            tr.append('<td>' + data.city + '<td>');
            tr.append('<td>' + data.state + '<td>');
            tr.append('<td>' + data.zip + '<td>');
            tr.append('<td>' + data.phone + '<td>');
            tr.append('<td>' + data.year + '<td>');

            $('#table').append(tr);           
        }
    });
});

如何使用AJAX显示表中json文件的数据？

2 个答案: