h话不多说,看图,点击删除,出现确认框,然后点击确认删除,直接删除数据,

因为是基于面向过程的,没有用php框架写,所以有3个文件:

第一个文件:data.php:用于从数据库中获取数据

<?php
try{
$pdo = new PDO("mysql:host=localhost;dbname=test","root","root"); 
}
catch(PDOException $e){
echo "数据库连接失败:".$e->getMessage();
exit;
}

$query = "select * from info";
$pdostatement = $pdo->query($query); 
$result = $pdostatement->fetchAll(PDO::FETCH_ASSOC);

第二个文件:index.php 展示页面;

<?php
include "./data.php";
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./css/layui.css" media="all">

</head>
<body>
<table class="layui-table">
<colgroup>
<col width="150">
<col width="200">
<col>
</colgroup>
<thead>
<tr>
<th>ID</th>
<th>名称></th>
<th>级别</th>
<th>编号</th>
<th>操作</th>
</tr> 
</thead>
<tbody>
<?php foreach($result as $key=>$v):?>
<tr>
<td><?php echo $v['id']?></td>
<td><?php echo $v['name']?></td>
<td><?php echo $v['level']?></td>
<td><?php echo $v['code_name']?></td>
<td><button class="delete">删除</button></td>
</tr>
<?php endforeach;?>
</tbody>
</table>
</body>
</html>
<script src="./layui/layui.js"></script>
<script src="./js/jquery-1.10.2.min.js"></script>
<script>
$(function(){
layui.use('layer', function(){
var layer = layui.layer;
$(".delete").click(function(){
var id =$(this).parents('tr').find('td').eq(0).html();
layer.confirm("确认删除?",function(){
layer.msg(id);
$.ajax({
url: "./do_delete.php" ,
data: {'id':id} ,
type: "post" ,
dataType:'json',
success:function(data){
if(data.code==200){
location.reload();
}else{
layer.msg("删除失败");
}
}
})
})
})
});

})
</script>

第三个页面:do_delete.php :ajax的处理页面:

<?php 
try{
$pdo = new PDO("mysql:host=localhost;dbname=test","root","root"); 
}
catch(PDOException $e){
echo "数据库连接失败:".$e->getMessage();
exit;
}

$id = $_POST["id"];
$query = "delete from info where id='$id'";
$result = $pdo->exec($query); 
if($result){
echo json_encode(array("code"=>200));
}else{
echo json_encode(array('code'=>400));
}

上面就是全部代码,基于mvc的也是一样的思路,比这个更简单,可以自己试试看,

基于layui的表格异步删除,ajax的简单运用的更多相关文章

  1. 基于layui,Jquery 表格动态编辑 设置 编辑值为 int 或者 double 类型及默认值

    首先先推荐大家在看这篇笔记时,阅读过我写的这篇 Layui表格编辑[不依赖Layui的动态table加载] 阅读过上面那篇笔记之后呢,才能更好的理解我现在所要说的这个东西 接下来废话不多说,上代码. ...

  2. python操作三大主流数据库(6)python操作mysql⑥新闻管理后台功能的完善(增、ajax异步删除新闻、改、查)

    python操作mysql⑥新闻管理后台功能的完善(增.删.改.查)安装表单验证D:\python\python_mysql_redis_mongodb\version02>pip instal ...

  3. Mvc音乐商店demo的ajax异步删除功能总结

    刚刚从学校出来参加工作,没啥工作经验,所以各位大神们不要嘲笑哈! 来公司后要进行培训,给我们的作业中有一个使用 dapper+mvc+ajax+SQL Server 2008,来实现一个音乐商店的de ...

  4. 基于jQuery表格增加删除代码示例

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. layui树形表格支持非异步和异步加载

    layui树形表格支持非异步和异步加载. 仓库地址:https://gitee.com/uniqid/ 使用示例如下: <div class="uui-admin-common-bod ...

  6. layui-table-column-select（layui数据表格可搜索下拉框select）

    layuiTableColumnSelect 在layui table的基础上对表格列进行扩展:点击单元格显示可搜索下拉列表. 码云地址:https://gitee.com/yangqianlong9 ...

  7. 基于layUI调用后台数据实现区域信息级联查询

    基于layUI调用后台数据实现区域信息级联查询 1.基本思路 后台提供根据区域编码查询区域列表公共接口 页面初始化调用后台接口加载所有省份 点击省份将省份区域编码传入后台查询该省份下所有地市信息,以此 ...

  8. 如何基于layui的laytpl实现数据绑定

    想了半天才想起自己园子的登录密码.可想而知,多长时间没登录了 正文一开始用layui做了几个管理系统,所以用起来觉得确实很容易上手,管理后台最常用的就是form和table以及弹窗类.layui提供的 ...

  9. 使用webapi绑定layui数据表格完整增删查改记录

    因为每次给layui数据表格绑定数据或者类似操作的时候  总要重新做一遍 而且忘记很多东西 所以干脆写博客把相关东西记录下来 便于查阅和修正 以下是一个完整的数据表格i项目的增删改查案例 先来看后台 ...

随机推荐

  1. 【Day3】1.正则表达式

    1.正则表达式 2.案例 关闭贪婪模式

  2. 【转载】interpolation（插值）和 extrapolation（外推）的区别

    根据已有数据以及模型(函数)预测未知区域的函数值,预测的点在已有数据范围内就是interpolation(插值), 范围外就是extrapolation(外推). The Difference Bet ...

  3. Django_04_视图

    视图 后台管理页面做好了,接下来就要做公共访问的页面了 对于django的设计框架MVT,用户在URL中请求的是视图,视图接收请求后进行处理,并将处理的结果返回给请求者 使用视图时需要进行两步操作 1 ...

  4. delphi xe5 fastreport4.14 中文很多时换行不正确

    用一般的frxMEMOview 中文换行是瞎换,缺少数据,换成frxrichview 即可, frxrichview 使用注意点 1).Delphi中文很多时换行不正确 2).要在窗体上拖一个frxr ...

  5. 团队第三次作业：Alpha版本第一周小结

    姓名 学号 周前计划安排 每周实际工作记录 自我打分 XXX 061109 1.原型设计与编码任务分配 2.构思程序个性化测试模块的初步实现 1.原型设计与编码任务分配 2.设计了部分类及其成员函数( ...

  6. Python项目列表

    70个Python项目列表: 1.[Python 图片转字符画]2.[200行Python代码实现2048]3.[Python3 实现火车票查询工具]4.[高德API+Python解决租房问题 ]5. ...

  7. lnmp配置

    yum源切换 下载wegt工具 yum install -y wget 备份 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS- ...

  8. 一次router拦截器的应用

    实现 退出登陆  无法回退到其它页面 当有登陆状态时  可以拿其它页面的地址直接访问 若没有登陆状态   拿其它页面的地址直接访问 会报错 router.beforeEach((to, from, n ...

  9. single-pass单遍聚类方法

    一.通常关于文本聚类也都是针对已有的一堆历史数据进行聚类,比如常用的方法有kmeans,dbscan等.如果有个需求需要针对流式文本进行聚类(即来一条聚一条),那么这些方法都不太适用了,当然也有很多其 ...

  10. python基本数据类型剖析

    一. 基本数据类型常用功能:1. 整数 int #int内部优化 n1=123 n2=n1 n1= 123 n2= 123 ========2份内存========= if -5~257: n1= 1 ...