PHP +ajax + layui 实现删除列表功能
'# PHP + Ajax + Layui 实现删除列表功能
一、背景与问题
在现代Web开发中，动态更新数据是常见需求。传统的页面刷新方式会导致用户体验断层，而通过Ajax技术可实现异步数据更新。Layui作为流行的前端框架，提供了丰富的组件库，其中的table组件支持行级操作，非常适合结合Ajax实现删除功能。
传统删除功能的痛点：
- 页面全量刷新导致用户操作中断
- 无法实时反馈删除结果
- 需要额外开发确认弹窗
- 缺乏数据校验机制
通过Ajax+Layui方案，可实现：
- 无刷新删除
- 实时反馈结果
- 增强交互体验
- 更好的错误处理机制
二、基本原理
本方案采用前后端分离架构，核心流程如下：
- 前端通过Layui的table模块渲染数据
- 用户点击删除按钮时，触发Ajax请求
- 前端发送DELETE请求到后端接口
- 后端验证请求合法性并执行删除操作
- 后端返回JSON响应
- 前端根据响应更新表格数据
关键点：
- 使用JSON作为数据交换格式
- 通过状态码区分成功/失败
- 前端需要处理异常情况
- 后端需要进行输入校验
三、环境准备
# 安装依赖
composer require layui/layui项目结构建议：
project/
├── index.php # 前端页面
├── delete.php # 后端接口
├── config.php # 配置文件
├── assets/
│ ├── css/
│ └── js/
└── templates/
└── table.html # 模板文件四、核心实现
1. 前端页面实现
<!-- index.php -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="assets/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-container">
<table id="demo" lay-filter="test"></table>
</div>
<script src="assets/layui/layui.js"></script>
<script>
layui.use('table', function(){
var table = layui.table;
// 渲染表格
table.render({
elem: '#demo'
,url: 'data.php' // 数据接口
,cols: [[ // 表头
{type: 'checkbox', fixed: 'left'}
,{field:'id', title:'ID'}
,{field:'name', title:'名称'}
,{fixed: 'right', width:120, title:'操作', toolbar:'#barDemo'}
]]
,page: true
});
// 工具栏事件
table.on('tool(test)', function(obj){
var data = obj.data;
if(obj.event === 'del'){
layer.confirm('确定删除该记录？', {
btn: ['确定','取消']
}, function(){
$.ajax({
url: 'delete.php',
type: 'DELETE',
data: {id: data.id},
success: function(res){
if(res.code === 200){
layer.msg('删除成功');
table.reload('demo');
}else{
layer.msg(res.msg);
}
}
});
});
}
});
});
</script>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="del">删除</a>
</script>
</body>
</html>关键代码解释：
- 使用layui的table模块进行数据渲染
- 定义工具栏事件处理函数
- 使用layer.confirm实现删除确认
- 通过Ajax发送DELETE请求
- 根据响应结果刷新表格
2. 后端接口实现
<?php
// delete.php
require 'config.php';
// 验证请求
if ($_SERVER['REQUEST_METHOD'] !== 'DELETE') {
http_response_code(405);
exit(json_encode(['code' => 405, 'msg' => 'Method Not Allowed']));
}
// 获取参数
$id = isset($_GET['id']) ? intval($_GET['id']) : 0;
// 验证参数
if ($id <= 0) {
http_response_code(400);
exit(json_encode(['code' => 400, 'msg' => 'Invalid ID']));
}
// 数据库操作
try {
$stmt = $pdo->prepare("DELETE FROM items WHERE id = ?");
$stmt->execute([$id]);
if ($stmt->rowCount() === 0) {
throw new Exception("Record not found");
}
echo json_encode(['code' => 200, 'msg' => '删除成功']);
} catch (Exception $e) {
http_response_code(500);
echo json_encode(['code' => 500, 'msg' => $e->getMessage()]);
}关键点：
- 验证请求方法类型
- 参数类型校验
- 使用预处理语句防止SQL注入
- 异常处理机制
- 返回标准JSON格式
3. 数据接口实现
<?php
// data.php
require 'config.php';
// 查询数据
$stmt = $pdo->query("SELECT * FROM items");
$items = $stmt->fetchAll(PDO::FETCH_ASSOC);
// 返回JSON
header('Content-Type: application/json');
echo json_encode(['code' => 200, 'data' => $items]);五、完整案例
项目结构
project/
├── index.php
├── delete.php
├── data.php
├── config.php
├── assets/
│ ├── css/
│ └── js/
└── templates/
└── table.html完整功能流程
- 用户打开index.php，加载Layui库
- 页面初始化渲染表格，加载data.php数据
- 用户点击删除按钮，触发Ajax请求
- delete.php验证请求并执行删除
- 根据响应结果刷新表格
- 展示操作反馈信息
数据库结构
CREATE TABLE items (
id INT PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(100) NOT NULL,
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);六、源码解析
1. 前端代码解析
// 关键代码
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#demo'
,url: 'data.php'
,cols: [[ // 表头
{type: 'checkbox', fixed: 'left'}
,{field:'id', title:'ID'}
,{field:'name', title:'名称'}
,{fixed: 'right', width:120, title:'操作', toolbar:'#barDemo'}
]]
,page: true
});
table.on('tool(test)', function(obj){
var data = obj.data;
if(obj.event === 'del'){
layer.confirm('确定删除该记录？', {
btn: ['确定','取消']
}, function(){
$.ajax({
url: 'delete.php',
type: 'DELETE',
data: {id: data.id},
success: function(res){
if(res.code === 200){
layer.msg('删除成功');
table.reload('demo');
}else{
layer.msg(res.msg);
}
}
});
});
}
});
});关键点：
- 使用layui的table模块
- 定义工具栏事件处理
- 使用layer弹窗确认操作
- 通过Ajax发送DELETE请求
- 刷新表格实现数据更新
2. 后端代码解析
<?php
// delete.php
require 'config.php';
// 验证请求
if ($_SERVER['REQUEST_METHOD'] !== 'DELETE') {
http_response_code(405);
exit(json_encode(['code' => 405, 'msg' => 'Method Not Allowed']));
}
// 获取参数
$id = isset($_GET['id']) ? intval($_GET['id']) : 0;
// 验证参数
if ($id <= 0) {
http_response_code(400);
exit(json_encode(['code' => 400, 'msg' => 'Invalid ID']));
}
// 数据库操作
try {
$stmt = $pdo->prepare("DELETE FROM items WHERE id = ?");
$stmt->execute([$id]);
if ($stmt->rowCount() === 0) {
throw new Exception("Record not found");
}
echo json_encode(['code' => 200, 'msg' => '删除成功']);
} catch (Exception $e) {
http_response_code(500);
echo json_encode(['code' => 500, 'msg' => $e->getMessage()]);
}关键点：
- 请求方法校验
- 参数类型校验
- 预处理语句防止SQL注入
- 异常处理机制
- 返回标准JSON格式
七、进阶使用
1. 批量删除功能
// 增加批量删除功能
$('#batchDelete').on('click', function(){
var checkStatus = table.checkStatus('demo');
var ids = checkStatus.data.map(function(item){
return item.id;
});
if(ids.length === 0){
layer.msg('请选择要删除的项');
return;
}
layer.confirm('确定批量删除？', {
btn: ['确定','取消']
}, function(){
$.ajax({
url: 'delete.php',
type: 'POST',
data: {ids: ids},
success: function(res){
if(res.code === 200){
layer.msg('批量删除成功');
table.reload('demo');
}else{
layer.msg(res.msg);
}
}
});
});
});2. 软删除功能
// 软删除实现
$stmt = $pdo->prepare("UPDATE items SET deleted_at = NOW() WHERE id = ?");
$stmt->execute([$id]);3. 操作日志记录
// 记录操作日志
$stmt = $pdo->prepare("INSERT INTO logs (action, user_id, target_id) VALUES (?, ?, ?)");
$stmt->execute(['delete', $userId, $id]);八、性能与工程实践
1. 性能优化
- 缓存机制：对频繁查询的数据进行缓存
- 连接池：使用PDO连接池减少数据库连接开销
- 异步处理：复杂操作可使用队列处理
- 索引优化：在id字段上建立索引
- 限流机制：防止恶意删除请求
2. 安全考虑
- CSRF防护：添加token验证
- SQL注入防护：使用预处理语句
- XSS防护：对用户输入进行过滤
- 权限控制：验证用户操作权限
- 日志审计：记录所有操作日志
3. 异常处理
// 增强异常处理
try {
// 业务逻辑
} catch (Exception $e) {
// 记录日志
error_log($e->getMessage(), 3, 'error.log');
// 返回统一错误信息
http_response_code(500);
echo json_encode(['code' => 500, 'msg' => '服务器内部错误']);
}九、常见问题与踩坑
1. 常见错误
错误1：跨域请求失败
# 错误表现
XMLHttpRequest cannot load ... No 'Access-Control-Allow-Origin' header is present on the requested resource.解决方法：在服务器端添加CORS头
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST, DELETE");错误2：删除失败
# 错误表现
删除后表格未更新解决方法：确保删除接口返回正确的状态码
错误3：SQL注入漏洞
// 错误代码
$stmt = $pdo->query("DELETE FROM items WHERE id = $id");解决方法：使用预处理语句
2. 常见坑点
- 未处理异常情况：未处理空值、无效ID等情况
- 未刷新表格：删除后未调用table.reload()
- 未处理并发删除：多个请求同时删除同一记录
- 未设置Content-Type：导致JSON解析失败
- 未处理超大数据量：影响性能
十、最佳实践
- 使用标准HTTP方法：GET/POST/DELETE
- 返回统一格式：{code, msg, data}
- 添加操作日志：记录删除操作
- 实施权限控制：验证用户权限
- 添加操作确认：防止误删
- 进行输入校验：确保参数有效性
- 添加异常处理：统一处理异常
- 进行性能测试：压力测试删除功能
十一、总结
通过PHP + Ajax + Layui实现删除列表功能，可以有效提升用户体验。该方案通过异步操作避免页面刷新，通过Layui组件实现丰富的交互效果。在实际开发中，需要注意安全性、性能和异常处理等问题。
适用场景：
- 需要实时更新的列表展示
- 需要异步操作的管理系统
- 需要增强交互的Web应用
- 需要操作确认的删除功能
不适用场景：
- 需要立即反馈的删除操作
- 需要大量数据处理的场景
- 需要复杂业务逻辑的删除流程
- 需要高并发处理的系统
通过合理使用该方案，可以显著提升Web应用的交互体验和开发效率。在实际开发中，建议结合具体业务需求进行适当的调整和优化。
评论已关闭