tofacebook.com -专业IT技术社区 jquery之从ajax获取json数据以表格的形式显示在页面上 Web程序 - tofacebook.com-专业IT技术社区
140°

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

标签:php   src   query   order   get   echo   ddr   框架   console   

最近在学习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数据以表格的形式显示在页面上

标签:php   src   query   order   get   echo   ddr   框架   console   

原文地址:https://www.cnblogs.com/creazybeauty/p/8568177.html


本文由百家号/熊掌号作者上传并发布,百家号仅提供信息发布平台。文章仅代表作者个人观点,不代表百度立场。