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

2019-08-01 Ajax实现从数据库读取表的更多相关文章

  1. 【纪中集训】2019.08.01【NOIP提高组】模拟 A 组TJ

    T1 Description 给定一个\(N*N(N≤8)\)的矩阵,每一格有一个0~5的颜色.每次可将左上角的格子所在连通块变为一种颜色,求最少操作数. Solution IDA*=启发式迭代加深 ...

  2. echarts通过ajax向服务器发送post请求,servlet从数据库读取数据并返回前端

    1.echarts的官网上的demo,都是直接写死的随机数据,没有和数据库的交互,所以就自己写了一下,ok,我们开始一步一步走一遍整个流程吧. 就以官网最简单的那个小demo来做修改吧.官网上的小de ...

  3. MyBatis 配置/注解 SQL CRUD 经典解决方案(2019.08.15持续更新)

    本文旨在记录使用各位大神的经典解决方案. 2019.08.14 更新 Mybatis saveOrUpdate SelectKey非主键的使用 MyBatis实现SaveOrUpdate mybati ...

  4. PHP - AJAX 与 MySQL-AJAX 数据库实例

    PHP - AJAX 与 MySQL AJAX 可用来与数据库进行交互式通信. AJAX 数据库实例 下面的实例将演示网页如何通过 AJAX 从数据库读取信息: 本教程使用到的 Websites 表 ...

  5. 《Entity Framework 6 Recipes》中文翻译系列 (38) ------ 第七章 使用对象服务之动态创建连接字符串和从数据库读取模型

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 第七章 使用对象服务 本章篇幅适中,对真实应用中的常见问题提供了切实可行的解决方案. ...

  6. AppSettings从数据库读取

    /// <summary> /// 提供对配置信息的访问 /// </summary> public static class AppSettings { /// <su ...

  7. 10天学会phpWeChat——第三天:从数据库读取数据到视图

    在第二天,我们创建了我们的第一个phpWeChat功能模块,但是比较简单.实际生产环境中,我们不可能有如此简单的需求.更多的情况是数据存储在MySql数据库中,我们开发功能模块的作用就是将这些数据从M ...

  8. C# 图片保存到数据库和从数据库读取图片并显示

    图片保存到数据库的方法: public void imgToDB(string sql)        {   //参数sql中要求保存的imge变量名称为@images            //调 ...

  9. C#实现从数据库读取数据到Excel

    用第三方组件:NPOI来实现 先去官网:http://npoi.codeplex.com/下载需要引入dll(可以选择.net2.0或者.net4.0的dll),然后在网站中添加引用.使用 NPOI ...

随机推荐

  1. 京东js加密 nloginpwd 破解

    京东登录,有一个参数nloginpwd,是加密字段. 第一步:浏览器抓包 第二部:搜索加密字段 js 代码 第三部: 下断点 2. js代码: var navigator = {}; var wind ...

  2. Rxjava学习笔记

    1.使用Observable.range(int start, int count)创建一个发射特定整数序列的Observable,第一个参数为起始值,第二个为发送的个数,如果为0则不发送,负数则抛异 ...

  3. 201800624模拟赛T2——回家路上

    题目描述 很多学生都抱怨浪费在回家路上的时间太长.这天dongdong刚走出学校大门,就听说某段路在施工(但不知道是哪条路),有可能导致他回家的时间会变长. Dongdong给出了一张地图,图中标号为 ...

  4. 用JSON.parse(JSON.stringify(itemData))序列化反序列化实现‘深度复制’

    还可以用来去除值不具有JSON 表示形式(数字.字符串.逻辑值.数组.对象.null)的属性,也就是说像undefined和function这样的属性值.

  5. mybatis框架,使用foreach实现复杂结果的查询--循环List集合方式

    需求,根据用户角色列表  查询用户列表信息 之前我们传入的参数是Array,一个数组的形式,现在我们传入的是一个List集合,其他条件没有变化. /** * 需求:传入指定的用户角色,用户角色有1-n ...

  6. 2014-2015 ACM-ICPC, Asia Tokyo Regional Contest

    2014-2015 ACM-ICPC, Asia Tokyo Regional Contest A B C D E F G H I J K O O O O   O O         A - Bit ...

  7. unzip命令(转)

    unzip命令用于解压缩由zip命令压缩的“.zip”压缩包. 语法 unzip(选项)(参数) 选项 -c:将解压缩的结果显示到屏幕上,并对字符做适当的转换: -f:更新现有的文件: -l:显示压缩 ...

  8. 第02组Beta冲刺(4/4)

    队名:十一个憨批 组长博客 作业博客 组长黄智 过去两天完成的任务:了解整个游戏的流程 GitHub签入记录 接下来的计划:继续完成游戏 还剩下哪些任务:完成游戏 燃尽图 遇到的困难:没有美术比较好的 ...

  9. 三天精通Vue教程

    在这里更新作为后端工程师想要快速掌握Vue需要看的重点内容,三天精通教程,加油! 学前摘要 ES6的常用语法 Vue的常用语法

  10. Redis Zrevrank 命令

    Redis Zrevrank 命令返回有序集中成员的排名.其中有序集成员按分数值递减(从大到小)排序. 排名以 0 为底,也就是说, 分数值最大的成员排名为 0 . 使用 ZRANK 命令可以获得成员 ...