码迷,mamicode.com
首页 > Web开发 > 详细

ajax从服务器获取信息并拼接显示在table

时间:2019-03-20 15:43:25      阅读:292      评论:0      收藏:0      [点我收藏+]

标签:页面   class   服务   stat   文档   lis   fun   head   准备   

1、页面代码

<body>
    <h1>显示所有员工信息</h1>
    <div>
        <table class="table">
            @*标题*@
            <thead>
                <tr>
                    <th>账号</th>
                    <th>真实姓名</th>
                    <th>电话</th>
                    <th>密码</th>
                    <th>状态</th>
                </tr>
            </thead>
            @*内容*@
            <tbody id="tbd"></tbody>
        </table>
    </div>
</body>

2、ajax

<script>
    //文档准备就绪函数
    $(function () {
        lists();
    })
    //显示信息
    function lists() {
        $.ajax({
            url: "http://localhost:51071/api/User",
            type: "get",
            success: function (data) {
                //清空tbd
                $("#tbd").empty();
                for (var item in data) {
                    //进行拼接
                    $("#tbd").append(
                        "<tr>" +
                        //依次获取各字段
                        "<th>" + data[item].Name + "</th>" +
                        "<th>" + data[item].RealName + "</th>" +
                        "<th>" + data[item].Telphone + "</th>" +
                        "<th>" + data[item].Pass + "</th>" +
                        "<th>" + data[item].Status + "</th>" +
                        "</tr>");
                }
            }
        });
    }
</script>

 

ajax从服务器获取信息并拼接显示在table

标签:页面   class   服务   stat   文档   lis   fun   head   准备   

原文地址:https://www.cnblogs.com/dujian123/p/10565203.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!