jquery之从ajax获取json数据以表格的形式显示在页面上

最近在学习vue框架,想使用jquery遍历与v-for遍历来实现表格的显示,这一节写的是jquery遍历

html代码示例如下:

<html>
<head>
<meta charset="utf-8">
    <title></title>
    <style type="text/css">
    *{
        padding: 0;
        margin: 0;
    }
        table{
            margin: 100px auto;
            border: 1px solid #000;
            border-collapse: collapse;/*设置表格的边框是否被合并为一个单一的边框*/
            border-spacing: 0;/*设置相邻单元格的边框间的距离*/
        }
        tr{
            width: 300px;
            height: 50px;
            line-height: 50px;
            border-bottom: 1px solid #000;
            background-color: pink;
        }
        td,th{
            width: 99px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border-right: 1px solid #000;
        }
    </style>
    <script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
</body>
</html>

<script type="text/javascript">
    $.ajax({
        url:'ajaxtable.php',
        type:'get',
        datatype:'json',
        success:function(res){
            console.log(res);
    //将数据显示在页面上
     var str = "";
     str +="<table><thead><tr><th>姓名</th><th>年龄</th><th>住址</th></tr></thead><tbody>";
     //遍历数据
     $.each(res,function(index,element){
      str +="<tr><td>"+element['name']+"</td><td>"+element['age']+"</td><td>"+element['address']+"</td></tr>";
})
//遍历完成之后
str +="</tbody></table>";
//将表格添加到body中
$('body').append(str);
}
})
</script>      

 

 

php代码示例如下:

 

<?php 
    header('content-type:text/html;charset=utf-8');
    echo  file_get_contents('ajaxtable.json');
 ?>

 

json代码示例如下:

 

[{
    "name":"baby",
    "age":27,
    "address":"china weifang"
},
{
    "name":"黄晓明",
    "age":30,
    "address":"china yantai"
},
{
    "name":"鹿晗",
    "age":22,
    "address":"china qingdao"
}]

 

posted @ 2018-03-14 16:02  乖乖乖码  阅读(21696)  评论(0编辑  收藏  举报