基于layui的表格异步删除,ajax的简单运用
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的也是一样的思路,比这个更简单,可以自己试试看,
转载于:https://www.cnblogs.com/apolloren/p/9697206.html
基于layui的表格异步删除,ajax的简单运用相关推荐
- X-admin经典前端后台管理模板，基于layui的轻量级前端后台管理框架，简单，兼容性好，面向所有层次的前后端程序
X-admin 简介 X-admin基于layui的轻量级前端后台管理框架,简单免费,兼容性好,面向所有层次的前后端程序.创立于2017年初,为了敏捷WEB应用开发和简化企业应用开发而诞生的.#X-a ...
- java毕业设计，基于layui+SSM实现母婴商场系统
以下是我今年的论文加作品源码,感谢阅读,如需要源码学习,和本论文进行参考,可私聊我,如遇什么不懂的,我很乐意帮助你,让我们一起成长 目录 摘 要 ABSTRACT 1 绪论 1.1 研究背景 1.2 ...
- layui静态表格设置滚动条_解决layui数据表格table的横向滚动条显示问题
解决layui数据表格table的横向滚动条显示问题 加上这段样式代码就可以解决了: body{overflow-y: scroll;} /* 禁止刷新后出现横向滚动条 */ ps:这个问题fly社区 ...
- bootstrap 树形表格渲染慢_layUI之树状表格异步加载组件treetableAsync.js（基于treetable.js）...
概述 后台框架中使用树状表格是非常常用的操作,layUI本身并没有这种组件. 第三方的treetable.js做到了完美的实现,但是不能实现在双击时异步加载数据,本文就是站在了巨人的肩膀上实现的异步加 ...
- python操作三大主流数据库(6)python操作mysql⑥新闻管理后台功能的完善(增、ajax异步删除新闻、改、查)...
python操作mysql⑥新闻管理后台功能的完善(增.删.改.查) 安装表单验证 D:\python\python_mysql_redis_mongodb\version02>pip inst ...
- 基于layui 的数据表格复杂表头导出到excel文件中
基于layui,js-xlsx的前台数据复杂表头导出到excel文件中 前言 : layui table 加载 layui 表头样式 4. 封装之后的sheet !cols !rows ! merge ...
- PHP数据layui表格,基于layui和thinkphp数据表格的数据接口,layui表格局部刷新
基于layui和thinkphp数据表格的数据接口基于获得和框架数据表格的数据接口,接口程序部分,来源于网络图,但很有用 前端URL : '/管理员.PHP/文章/列表' 后端 公共e函数列表(){ ...
- 在layui中使用ajax传值给后台,浅谈layui 数据表格前后台传值的问题
1.1查询 layui.use('table', function() { var table = layui.table; table.render({ elem : '#demo', url : ...
- 基于layui.upload.js 拖拽文件/文件夹上传下载
layui.upload.js 拖拽文件/文件夹上传下载 前言 js代码 页面使用(我这里用的是uploader.jsp) CSS文件 上传效果 总结 前言 项目需求完成文件上传,可以拖拽上传文件/文 ...
最新文章
- 这二维码鬼畜起来了，加颜色加插画还能加GIF
- pku3020 Antenna Placement (解法1)
- Dubbo 注解驱动（Annotation-Driven）
- PHP CLI应用的调试原理
- 看技术笔记，提高嵌入式基础
- ICE专题：ICE简介
- 认证令牌_Java应用程序的令牌认证
- nsga2算法_用遗传算法进行容量管理 让虚拟机放置策略更优
- desktop docker 无法卸载_关于Docker：Docker – 无法移除死容器
- JVM优化系列-Stop-The-World实战
- （25）FPGA乘法器设计（第5天）
- pytorch分布式报错 “tensor must be non-overlapping and dense“
- linux 测试网络端口通不通_能否使用一台矢量网络分析仪来控制多台 E5092A 以增加测试端口数？...
- 软件测试项目案例.pdf,最经典软件测试案例.pdf
- 大学生网页作业成品——基于HTML网上书城项目的设计与实现
- win7电脑开启屏幕旋转功能吗 Win7系统屏幕的旋转功能如何使用
- html5 日历 仿ios,一款完整的蓝白风格HTML5日历应用程序
- 光耦w314的各引脚图_P621 光耦
- 麦库记事如何导出html,麦库记事使用问题解答
- 微信小程序wepy框架+minui踩坑之路