在 jQuery 中使用 Ajax 实现批量删除的基本思路，使用 jQuery 监听“批量删除”按钮的点击事件，收集用户选择的要删除的项目的标识（例如，ID）。
使用 Ajax 发送异步请求到后端，将要删除的项目标识传递给服务器。在后端，接收到请求后，根据接收到的项目标识进行删除操作，并返回相应的结果给前端。
以下是一个简单的示例代码：
index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Ajax批量删除</title>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
.box {
width: 500px;
margin: 30px;
}
.item {
padding: 8px;
border: 1px #eee solid;
margin: 4px 0;
}
button {
padding: 5px 12px;
cursor: pointer
}
</style>
</head>
<body>
<div class="box">
<h3>数据列表｜批量删除</h3>
<label><input type="checkbox" id="checkAll"> 全选 </label>
<button id="batchDel">批量删除</button>
<div id="dataList"></div>
</div>
<script>
$(function() {
// 初始化加载列表
loadData();
// 全选/取消全选
$('#checkAll').on('change', function() {
$('.ids').prop('checked', $(this).prop('checked'));
})
// 批量删除
$('#batchDel').click(function() {
// 获取所有选中id
let idArr = [];
$('.ids:checked').each(function() {
idArr.push($(this).val());
})
if (idArr.length == 0) {
alert('请勾选要删除的数据');
return false;
}
if (!confirm('确定删除选中数据？')) return;
// Ajax POST批量删除
$.post('del_api.php', {
action: 'batchdel',
ids: idArr // 数组直接传给php
}, function(res) {
if (res.code == 1) {
alert('删除成功');
loadData(); // 重新加载列表
} else {
alert(res.msg)
}
}, 'json')
})
})
// 加载列表
function loadData() {
$.get('del_api.php?action=getlist', function(html) {
$('#dataList').html(html)
})
}
</script>
</body>
</html>del_api.php
<?php
// 数据存储文件
$file = 'data.txt';
$action = $_REQUEST['action'] ?? '';
// 读取数据
function getData(){
global $file;
// 如果文件不存在，返回默认测试数据
if(!file_exists($file)){
return [
1 => '张三 - 员工信息',
2 => '李四 - 财务档案',
3 => '王五 - 人事资料',
4 => '赵六 - 项目文档',
5 => '孙七 - 合同文件',
6 => '周八 - 报销单据',
7 => '吴九 - 考勤记录',
8 => '郑十 - 客户资料',
9 => '冯十一 - 产品台账',
10 => '陈十二 - 库存明细'
];
}
return json_decode(file_get_contents($file), true);
}
// 保存数据到文件
function saveData($arr){
global $file;
file_put_contents($file, json_encode($arr, JSON_UNESCAPED_UNICODE));
}
// 获取数据列表
if($action == 'getlist'){
$list = getData();
$html = '';
foreach($list as $id => $name){
$html .= '<div class="item">
<input class="ids" type="checkbox" value="'.$id.'"> ID：'.$id.' - '.$name.'
</div>';
}
echo $html;
exit;
}
// 批量删除
if($action == 'batchdel'){
$ids = $_POST['ids'] ?? []; // 接收前端传来的ID数组
$data = getData();
// 循环删除选中数据
foreach($ids as $id){
unset($data[$id]);
}
saveData($data); // 保存删除后的数据
// 返回JSON给前端
echo json_encode([
'code' => 1,
'msg' => '批量删除成功'
], JSON_UNESCAPED_UNICODE);
exit;
}
本站原创内容，转载请注明来源：https://www.liutonghui.com/119
评论列表（0条）
暂无评论