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. 发送短信——java

    闲来无事研究一下调用第三方接口发送短信的技术 这一次我们使用阿里的短信服务 一.进行平台相关服务的注册和设置 下面请参照阿里的短信服务文档进行设置,只要按照文档步骤来差不多30分钟就能搞定服务注册: ...

  2. Linux基础篇之FTP服务器搭建（一）

    一.配置网络可以访问互联网(没有条件的可以提前下载相关版本的依赖包(也叫安装包,以下统称依赖包)上传到系统中也可以). 二.检查系统中是否存在相关的依赖包. 没有返回信息,说明系统中不存在相关的依赖包 ...

  3. 十七，k8s集群指标API及自定义API

    目录 资源指标: Metrics-Server 资源指标: Metric-Server介绍 Metric-Server部署 下载yaml文件 因为有墙, 所以提前下载image镜像, 当然也可以手动修 ...

  4. MyBatis-07-分页

    7.分页 思考:为什么要分页? 减少数据的处理量 7.1.使用Limit分页 select * from user limit startIndex,pageSize 使用Mybatis实现分页,核心 ...

  5. request.getParameterNames获得请求参数的名字(Get或者Post请求的参数都可以)

    1 protected Map<String, String> initRequestParams(HttpServletRequest request) { 2 Map<Strin ...

  6. python 中的匿名函数lamda和functools模块

    为什么 要把匿名函数和functools模块写在一起? 因为 lamda函数和functools模块都是对函数一种增强或者是简化. 匿名函数: 为了解决那些功能很简单的需求而设计一次性的需求函数 #& ...

  7. localstorage ie11不支持

    据我所知,localstorage在高版本的ie.谷歌.火狐下都是支持的,以前没在ie上看过,不清楚,今天我用ie11打开我vue编译后的html,竟然发现不支持localstorage了,用仿真的i ...

  8. 长春理工大学第十四届程序设计竞赛A Rubbish——并查集&&联通块

    题目 链接 题意:在 $10^5 \times 10^5$ 的大网格上,给出 $n$ 的格点的坐标,求联通块数(上下左右及对角线都认为相邻) 分析 DFS需要遍历网格的每个格点,可能会超时? 初始化时 ...

  9. blur([[data],fn]) 当元素失去焦点时触发 blur 事件。

    blur([[data],fn]) 概述 当元素失去焦点时触发 blur 事件.大理石平台生产厂 这个函数会调用执行绑定到blur事件的所有函数,包括浏览器的默认行为.可以通过返回false来防止触发 ...

  10. no suitable method found to override

    no suitable method found to override http://bbs.csdn.net/topics/200001058