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. pip安装超时解决方案

    1 安装的后面 用-i接一些国内的镜像,下面这个是清华的,亲测比较快 pip install apache-airflow -i https://pypi.tuna.tsinghua.edu.cn/s ...

  2. 基于C++11的100行实现简单线程池

    基于C++11的100行实现简单线程池 1 线程池原理 线程池是一种多线程处理形式,处理过程中将任务添加到队列,然后在创建线程后自动启动这些任务.线程池线程都是后台线程.每个线程都使用默认的堆栈大小, ...

  3. jenkins"控制台输出"乱码问题解决

    今天在搭建Jenkins环境时,安装完Tomcat.Jenkins.创建项目进行构建后,在查看控制台输出时,结果中文全部显示乱码.然后呢,就是漫长的解决历程,最终呢,解决乱码问题的时间终于超过了环境搭 ...

  4. appium+python 【Mac】UI自动化测试封装框架介绍 <三>---脚本的执行

    我自己编写的脚本框架中,所有的脚本执行均放在一个py文件中,此文件作为启动文件执行,包含了运行此文件将执行脚本.分配设备端口.自启appium服务等. 详细的介绍待后期补充.

  5. CSS实现按钮YES-NO按钮+Jquery获取按钮状态。

    前几天我经理突然跟我说,能不能做一个开关按钮,需要过滤的一个标识.说实话,一个做后端我是懵逼状态的. 不过网上资料很多,查了一遭,发现一个不错的哥们给出的案例,模仿一下成功实现,下面就自己总结一下: ...

  6. 【Android-布局复用】 多个界面复用一个布局文件（一）

    1.layout_common.xml 复用的布局文件 <?xml version="1.0" encoding="utf-8"?> <!-- ...

  7. Win2008 R2 IIS FTP防火墙的配置

    注意以下两个选项要在防火墙下开启,否则将会访问失败.

  8. 北京清北 综合强化班 Day5

    T1 思路: 输入数据,sort一下, 如果a[i]>sum+1(前缀和) 那么sum+1就一定不会被拼出来, 然后输出即可. 上代码: #include <iostream> #i ...

  9. 总结调试webview的方式(安卓)

    参考文章: 移动端真机调试指南 Mac 平台 Android 使用 Charles 抓包方法 Charles使用Map Local和Rewrite提高开发效率 通过chrome直接进行调试 chrom ...

  10. JavaWeb_(Mybatis框架)JDBC操作数据库和Mybatis框架操作数据库区别_一

    系列博文: JavaWeb_(Mybatis框架)JDBC操作数据库和Mybatis框架操作数据库区别_一 传送门 JavaWeb_(Mybatis框架)使用Mybatis对表进行增.删.改.查操作_ ...