本文详细讲解在 codeigniter 3 框架中实现「前端勾选复选框 + 后端批量删除」的完整流程，涵盖路由配置、控制器逻辑、视图渲染及 ajax 交互，并重点解决因错误路由定义导致的 404 报错问题。
本文详细讲解在 codeigniter 3 框架中实现「前端勾选复选框 + 后端批量删除」的完整流程，涵盖路由配置、控制器逻辑、视图渲染及 ajax 交互，并重点解决因错误路由定义导致的 404 报错问题。
在 CodeIgniter 3 中实现多选批量删除是一项常见但易出错的功能。核心在于前后端协同：前端收集选中的 ID 列表，通过 AJAX 提交；后端接收并执行 WHERE IN 删除操作。然而，许多开发者在配置路由时误用语法，导致请求返回 404 Not Found —— 这正是本教程首要解决的关键问题。
✅ 正确的路由配置（关键修复）
CodeIgniter 3 不支持类似 $route['itemDelete']['post'] = "item/deleteAll"; 的数组键式 HTTP 方法限定语法（该写法属于 CI4 风格）。若直接使用，框架无法识别该路由，必然触发 404 错误。
✅ 正确写法（推荐）：
// application/config/routes.php $route['item'] = 'item'; $route['itemDelete'] = 'item/deleteAll'; // 移除 ['post']，仅定义 URI 映射
⚠️ 补充安全建议（可选）：如需强制限定为 POST 请求，应在控制器方法内校验，而非依赖路由：
// 在 Item 控制器 deleteAll() 方法开头添加
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
show_404();
}
这种方式更符合 CI3 的设计规范，也便于统一处理 CSRF 验证（后续可结合 $this->security->get_csrf_hash() 增强安全性）。
✅ 控制器优化：健壮性与安全性提升
原始代码中存在潜在风险：未过滤空输入、未验证 ID 格式、未启用 CSRF 保护。以下是加固后的 deleteAll() 方法：
public function deleteAll()
{
// 1. 强制 POST 请求校验
if ($this->input->method() !== 'post') {
$this->output->set_status_header(405);
echo json_encode(['error' => 'Method not allowed']);
return;
}
// 2. 获取并清洗 IDs（防止注入）
$ids = trim($this->input->post('ids'));
if (empty($ids)) {
echo json_encode(['error' => 'No IDs provided']);
return;
}
$idArray = array_map('intval', explode(',', $ids)); // 强转整型，过滤非法字符
$idArray = array_filter($idArray); // 移除 0 或空值
if (empty($idArray)) {
echo json_encode(['error' => 'Invalid IDs']);
return;
}
// 3. 执行批量删除
$this->db->where_in('id', $idArray);
$deletedCount = $this->db->delete('items');
if ($deletedCount > 0) {
echo json_encode(['success' => "Deleted {$deletedCount} item(s) successfully."]);
} else {
echo json_encode(['error' => 'No records matched for deletion.']);
}
}
✅ 视图与前端脚本：精简可靠
原始 JS 存在冗余逻辑（如重复的 DOM 删除操作）和兼容性隐患。以下是优化后的前端代码片段（置于 <script> 标签内）：</script>
$(document).ready(function() {
// 全选/取消全选
$('#master').on('change', function() {
$('.sub_chk').prop('checked', this.checked);
});
// 批量删除按钮
$('.delete_all').on('click', function(e) {
e.preventDefault();
const selectedIds = $('.sub_chk:checked').map((i, el) => $(el).data('id')).get();
if (selectedIds.length === 0) {
alert('请至少选择一项！');
return;
}
if (!confirm('确定要删除所选记录吗？此操作不可恢复！')) return;
$.ajax({
url: $(this).data('url'),
type: 'POST',
data: { ids: selectedIds.join(',') },
dataType: 'json',
success: function(res) {
if (res.success) {
alert(res.success);
// 逐行移除已选行（比 filter 更精准）
$('.sub_chk:checked').closest('tr').remove();
$('#master').prop('checked', false);
} else {
alert('删除失败：' + (res.error || '未知错误'));
}
},
error: function(xhr) {
alert('请求失败：' + (xhr.responseJSON?.error || xhr.statusText));
}
});
});
});
? 注意：HTML 中复选框需确保 data-id 属性正确输出，且
? 总结
- 路由是第一道关卡：CI3 中必须使用 $route['uri'] = 'controller/method' 格式，禁用 ['post'] 等 CI4 语法；
- 安全不可妥协：始终校验请求方法、过滤输入、转换数据类型；
- 前端体验需严谨：合理提示、防重复提交、精准 DOM 操作；
- 调试技巧：开启 CI 的 log_threshold 查看错误日志，浏览器 Network 面板检查请求 URL 与状态码。
按此流程实施，即可稳定、安全地在 CodeIgniter 3 中实现高效多选批量删除功能。
