ajax返回json填充表格

在前端开发中，我们常常需要使用AJAX技术来实现网页动态更新。而JSON数据格式则常常用于数据交换，使得数据传输更加简便。

在本文中，我们将介绍如何通过AJAX返回JSON数据并将其填充到表格中。

//首先，我们需要创建一个用于请求数据的AJAX函数：
function loadData() {
    $.getJSON('data.json',function(data) {
        //将获取到的JSON数据转换为html格式并填充到表格中
        var table_html = '';
        $.each(data,function(index,item) {
            table_html += '<tr>';
            table_html += '<td>' + item.name + '</td>';
            table_html += '<td>' + item.gender + '</td>';
            table_html += '<td>' + item.age + '</td>';
            table_html += '</tr>';
        });
        $('#table tbody').html(table_html);
    });
}

//然后，在html页面中添加一个用于显示数据的表格：
<table id="table">
    <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

//最后，在页面加载完成后调用AJAX函数即可：
$(document).ready(function() {
    loadData();
});

通过以上代码，我们成功地实现了使用AJAX返回JSON数据并将其填充到表格中。需要注意的是，为了避免跨域问题，我们需要将数据文件放在同一服务器下，并修改AJAX请求的地址。