2019-08-01 Ajax实现从数据库读取表

php代码

<?php
//用pdo连接数据库
$dsn = 'mysql:host=127.0.0.1;port=3306;charset=utf8;dbname=news';
//实例化PDO
$pdo = new PDO($dsn,'root','root');

//var_dump($pdo);
$sql = "select * from news";
$res = $pdo->query($sql);
$row=$res->fetchALL(PDO::FETCH_ASSOC);
//print_r($row);

echo json_encode($row);
?>

html代码

<html>
    <meta charset="utf-8"/>
    <head><title>用户列表</title></head>
    <body>
    <button id="list">用户列表</button><button id="btn">显示隐藏</button>
        <div id="table"></div>
    
    </body>
</html>

<script type="text/javascript" src="Jquery2.1.4.js"></script>
<script type="text/javascript">
    $("#list").click(function(){
    
        //alert(1);
        $.ajax({
            url:"user_list.php",
            dataType:"json",
            success:function(e){
                var str = "<table border=1 cellspacing=0>";
                str+="<th>id</th><th>name</th><th>time</th><th>email</th><th>mobile</th><th>status</th>";
                /*
                for(var i in e){
                    str+="<tr><td>"+e[i].id+"</td><td>"+e[i].name+"</td><td>"+ttime(e[i].time)+"</td><td>"+e[i].email+"</td><td>"+e[i].mobile+"</td><td>"+status(e[i].status)+"</td></tr>";    
                }*/
                for (var i=0;i<e.length ;i++ )
                {
                    str+="<tr><td>"+e[i].id+"</td><td>"+e[i].name+"</td><td>"+ttime(e[i].time)+"</td><td>"+e[i].email+"</td><td>"+e[i].mobile+"</td><td>"+status(e[i].status)+"</td></tr>";    
                }
                str+="</table>";
                $("#table").html(str);
            }
        })    
    });

    $("#btn").click(function(){
        $("table").toggle(1000);
    });

    function ttime(timestamp) {
        //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var date = new Date(timestamp * 1000);
        Y = date.getFullYear() + '-';
        M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        D = date.getDate() + ' ';
        h = date.getHours() + ':';
        m = date.getMinutes() + ':';
        s = date.getSeconds();
        return Y+M+D+h+m+s;
    }

    function status(i){
        if (i==1)
        {
            return "正常";
        }
        if (i==2)
        {
            return "冻结";
        }
    }
</script>

 

 上面的for in 当然可以用for循环替代

for (var i=0;i<e.length ;i++ )
                {
                    str+="<tr><td>"+e[i].id+"</td><td>"+e[i].name+"</td><td>"+ttime(e[i].time)+"</td><td>"+e[i].email+"</td><td>"+e[i].mobile+"</td><td>"+status(e[i].status)+"</td></tr>";    
                }

 

效果：点击按钮出现表格

 

 

时间戳转换

function ttime(timestamp) {
        //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var date = new Date(timestamp * 1000);
        Y = date.getFullYear() + '-';
        M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        D = date.getDate() + ' ';
        h = date.getHours() + ':';
        m = date.getMinutes() + ':';
        s = date.getSeconds();
        return Y+M+D+h+m+s;
    }

 

posted @ 2019-08-01 19:16  筏愫  阅读(405)  评论(0)  编辑  收藏  举报