服务器返回的json数据如何在前端以表格形式显示出来,像下图那样

时间:2021-07-09 12:33:33
这是返回的json数据
"newlist":[{"uid":"10137","server_id":"1001","pay_time":"1855161512","pay_num":30},{"uid":"10138","server_id":"1001","pay_time":"72242424","pay_num":5},{"uid":"10139","server_id":"1001","pay_time":"10101010","pay_num":15}]



 $.ajax({
                    url: "user.php?action=main&do=referee&isAjax=1",
                    type: "post",
                    dataType: "json",
                    data: {
                        'pid': data.link,
                        'reflevel':data.level,
                        'id':data.uid
                    },
                 success:function(data){
                   //alert(data.err);
                  
                 },
                    error:function(){
                    }


                });


<table border="1">
                <tr>
                    <th>角色名</th><th>服务器</th><th>充值时间</th><th>充值总额</th>
                </tr>
                <tr>
                    <td></td><td></td><td>23</td><td>23</td>
                </tr>
                <tr>
                    <td>2</td><td>4</td><td>5</td><td>7</td>
                </tr>
</table>

服务器返回的json数据如何在前端以表格形式显示出来,像下图那样

4 个解决方案

#1


success:function(data){
                   //alert(data.err); eval(data.err)//分解
var html="<table>";
                   for(var i=0;i<data.err.length;i++)
{
html+=“<tr><td>data.err[i].uid</td></tr>”;
}
html+="</table>";
                 } 
然后$("#div").html(html); 

#2


你的这个问题解决了吗,我也想知道答案

#3


<div id="dv"></div><script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script>
    var data = { "newlist": [{ "uid": "10137", "server_id": "1001", "pay_time": "1855161512", "pay_num": 30 }, { "uid": "10138", "server_id": "1001", "pay_time": "72242424", "pay_num": 5 }, { "uid": "10139", "server_id": "1001", "pay_time": "10101010", "pay_num": 15 }] }
    var s = '<table border="1"><tr><th>角色名</th><th>服务器</th><th>充值时间</th><th>充值总额</th></tr>';
    for (var i = 0; i < data.newlist.length; i++) {
        s += '<tr><td>' + data.newlist[i].uid + '</td><td>' + data.newlist[i].server_id + '</td><td>' + data.newlist[i].pay_time + '</td><td>' + data.newlist[i].pay_num + '</td></tr>';
    }
    s += '</table>'
    $('#dv').html(s)
</script>

#4


前台页面接收json,然后动态解析json,并且动态生成表格里面的行和列。。。最后往表格里面填充就行

#1


success:function(data){
                   //alert(data.err); eval(data.err)//分解
var html="<table>";
                   for(var i=0;i<data.err.length;i++)
{
html+=“<tr><td>data.err[i].uid</td></tr>”;
}
html+="</table>";
                 } 
然后$("#div").html(html); 

#2


你的这个问题解决了吗,我也想知道答案

#3


<div id="dv"></div><script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script>
    var data = { "newlist": [{ "uid": "10137", "server_id": "1001", "pay_time": "1855161512", "pay_num": 30 }, { "uid": "10138", "server_id": "1001", "pay_time": "72242424", "pay_num": 5 }, { "uid": "10139", "server_id": "1001", "pay_time": "10101010", "pay_num": 15 }] }
    var s = '<table border="1"><tr><th>角色名</th><th>服务器</th><th>充值时间</th><th>充值总额</th></tr>';
    for (var i = 0; i < data.newlist.length; i++) {
        s += '<tr><td>' + data.newlist[i].uid + '</td><td>' + data.newlist[i].server_id + '</td><td>' + data.newlist[i].pay_time + '</td><td>' + data.newlist[i].pay_num + '</td></tr>';
    }
    s += '</table>'
    $('#dv').html(s)
</script>

#4


前台页面接收json,然后动态解析json,并且动态生成表格里面的行和列。。。最后往表格里面填充就行