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; }