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

Posted 凉白开的你

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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"
}]

 

以上是关于jquery之从ajax获取json数据以表格的形式显示在页面上的主要内容,如果未能解决你的问题,请参考以下文章

jquery ajax获取json文件数据在表格中显示

jQuery Ajax 调用返回 JSON 字符串而不是对象数组

layui 利用ajax冲获取到json 数据后 怎样进行渲染

jquery+ajax实现表格修改行操作

jQuery ajax 调用无法从 CakePHP 3.8 读取 json 编码数据(获取一个空数组)

使用 JSON 数据的 Ajax / Jquery 自动完成