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. SpringBoot中使用Maven插件,上传docker镜像

    开启docker远程端口 我上一篇里面写了,这里暴露的路径: 18.16.202.95:2375 简单构建 配置pom.xml文件 在properties中增加一行指定远程主机的位置 <prop ...

  2. Pycharm过期了怎么办?

    Pycharn过期了,打开Pycharm,选择help,倒数第三个register,用激活码进行激活,具体情况见激活码,侵删

  3. btcWallet系列之一-grpc模块

    btcwallet对外服务 btcwallet除了像btcd对外提供rpc服务以外,还提供了grpc服务,同时grpc采用的是protobuf来实现. 这方便与不同语言进行交互,降低客户端代码编写量. ...

  4. cube.js 最近的一些更新

    cube.js 是一个和不错的数据分析框架,最近又有了一些新的功能支持,以下是一些简单的 总结 基于web socket 的预览支持 react hooks api 支持 支持基于reecharts ...

  5. 【BigData】Java基础_ArrayList的使用

    ArrayList概述 ArrayList底层使用的是数组.是List的可变数组实现,这里的可变是针对List而言,而不是底层数组. 数组有自身的特点,不变性,一旦数组被初始化,那么其长度就固定了,不 ...

  6. 区间dp提升复习

    区间\(dp\)提升复习 不得不说这波题真的不简单... 技巧总结: 1.有时候转移可以利用背包累和 2.如果遇到类似区间添加限制的题可以直接把限制扔在区间上,每次只考虑\([l,r]\)被\([i, ...

  7. 解决github打不开

    今天重庆电信的“临时工”把github废了. 主要是github.githubassets.com和customer-stories-feed.github.com访问不到 通过修改host的方式上g ...

  8. VS2019 NetCore3.0找寻grpc模板

    今天研究Google的grpc框架的时候看到了https://www.cnblogs.com/yilezhu/p/10631420.html这哥们儿的博客 按照博客的内容找寻grpc模板,始终找不到A ...

  9. Asp.Net Core 2.x 和 3.x WebAPI 使用 Swagger 时 API Controller 控制器 Action 方法 隐藏 hidden 与 and 分组 group

    1.前言 为什么我们要隐藏部分接口? 因为我们在用swagger代替接口的时候,难免有些接口会直观的暴露出来,比如我们结合Consul一起使用的时候,会将健康检查接口以及报警通知接口暴露出来,这些接口 ...

  10. 记录一次在生成数据库服务器上出现The timeout period elapsed prior to completion of the operation or the server is not responding.和Exception has been thrown by the target of an invocation的解决办法

    记一次查询超时的解决方案The timeout period elapsed...... https://www.cnblogs.com/wyt007/p/9274613.html Exception ...