JQuery解析Json数据填充到表格

最新推荐文章于 2022-08-09 09:05:05 发布

原创最新推荐文章于 2022-08-09 09:05:05 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript从后端获取数据并将其显示在网页上的方法。通过Ajax调用，数据以表格形式呈现，展示了不同城市的账户数和客户数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

数据格式
在这里插入图片描述

HTML

  <table id='tabletest'>
    <tr>
        <th>城市名称</th>
        <th>账户数</th>
        <th>客户数</th>
    </tr>
 </table>

<script type="text/javascript">
	$(function(){
       $.ajax({
        url:'http://1X.1XX.X6.XX2:8000/screen/ecifdata/',
        type:'get',
        dataType:'json',
        success:function(data){	
            //方法中传入的参数data为后台获取的数据
            for(i in data.topdata) //data.data指的是数组，数组里是5个对象，i为数组的索引
            {
                var tr;
                tr='<td>'+data.topdata[i].name+'</td>'+'<td>'+data.topdata[i].acc_value+'</td>'+'<td>'+data.topdata[i].value+'</td>'
                $("#tabletest").append('<tr>'+tr+'</tr>')
            }
        }
    })
})
</script>