1. 程式人生 > >ajax從服務器獲取信息並拼接顯示在table

ajax從服務器獲取信息並拼接顯示在table

姓名 thead nbsp 進行 head 信息 準備 script oca

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