基于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文件 上传效果 总结 前言 项目需求完成文件上传,可以拖拽上传文件/文 ...
最新文章
- CentOS6.8下安装MySQL5.5数据库
- 为什么 GROUP BY 之后不能直接引用原表中的列?
- Python中的join()函数的用法
- 第二章:2.5 卷积辅助求解方法
- 九十二、动态规划系列之股票问题(上)
- C# 对象与JSON串互相转换
- 盘点和程序员相关的那些事,让你不再被割韭菜,薅羊毛!
- 初级第一旬05— 蓝字观试题
- oracle sequence 不同 会话 不连续_序列 Sequence
- day-01(html)
- 【转】tensorflow中的batch_norm以及tf.control_dependencies和tf.GraphKeys.UPDATE_OPS的探究
- 纷杂的Spring-boot-starter: 1 应用 日志 和 spring- boot- starter- logging
- 合成器基础(三) - 减法合成器的工作原理
- 【96】太空射击游戏_笔记
- 教你用Python实现经典游戏《小蜜蜂》
- Android 电池系统节点信息简述
- 华东理工大学pk华东师范大学计算机专业,华东理工大学朱为宏教授和华东师范大学杨海波教授合作在光控手性金属配位自组装体系的研究中取得突破性进展...
- 微信小程序 车轮之 滑动删除
- 2018双11万家互联网门店参战:看苏宁的撩人新姿势
- C语言程序设计十个币,C语言程序设计复习(10页)-原创力文档