CodeIgniter中Ajax确认删除点击确定无响应如何修复

核心故障原因 #

一共4个直接导致功能失效的问题：

• 引入的jQuery是slim精简版本，该版本移除了$.ajax等Ajax相关方法，点击确认后JS直接报错，请求根本发不出去
• 删除按钮的value属性末尾多了冗余空格，拼接出的请求URL带多余空白字符，容易触发路由匹配失败
• 控制器删除方法针对Ajax请求使用了redirect()重定向，不符合Ajax接口的响应逻辑
• Ajax请求未配置错误回调，出错时无任何提示，难以定位问题

逐部分修正方案 #

1. 替换jQuery版本（最核心修复） #

把footer里的slim版jQuery换成完整版，slim版不支持Ajax、动画等常用方法：

<!-- 删除原有jquery-3.5.1.slim.min.js引用，替换为完整版 -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

2. 修正前端交互脚本 #

去除id前后的空白字符，补全错误回调，请求成功后手动触发页面更新：

<script>
$(document).ready(function () {
    $('.confirm-delete').click(function (e) {
        e.preventDefault();
        if(confirm("确定要删除这条数据吗？"))
        {
            // 用trim清除id前后可能存在的冗余空格
            var id = $(this).val().trim();
            $.ajax({
                type: "DELETE",
                url: "/employee/confirmdelete/"+id,
                success: function (response) {
                    alert("数据删除成功");
                    // 删除成功后刷新列表，也可写逻辑直接移除当前行DOM实现无刷新更新
                    window.location.reload();
                },
                error: function(xhr) {
                    alert("删除失败，错误码：" + xhr.status);
                }
            });
        }
    });
});
</script>

3. 修正删除按钮的value冗余空格 #

删除按钮value属性末尾的多余空格，避免URL拼接错误：

<button type="button" class="btn btn-danger confirm-delete" value="<?= $row->id; ?>">确认删除</button>

4. 修正控制器删除方法的响应逻辑 #

Ajax请求不要使用服务端重定向，直接返回JSON格式的操作状态即可：

public function delete($id)
{
    $this->load->model('EmployeeModel');
    $result = $this->EmployeeModel->deleteEmployee($id);  
    // 返回JSON响应，不做服务端跳转
    return $this->output
        ->set_content_type('application/json')
        ->set_output(json_encode([
            'code' => $result ? 200 : 500,
            'msg' => $result ? '删除成功' : '删除失败'
        ]));
}

5. 模型层与路由说明 #

原有路由配置、模型层删除逻辑无语法问题，不需要修改：

// 路由配置正常，可正确匹配DELETE请求
$route['employee/confirmdelete/(:any)']['DELETE'] = 'Frontend/EmployeeController/delete/$1';

// 模型删除逻辑正常
public function deleteEmployee($id)
{
    return $this->db->delete('employee', ['id' => $id]);
}

验证方法：修改完成后打开浏览器开发者工具的Console面板，确认没有$.ajax is not defined类报错，再点击删除按钮查看Network面板中DELETE请求是否正常发送、返回200状态码即可。

内容的提问来源于stack exchange，提问作者calcifer