AJAX POST到CodeIgniter4控制器时参数无法被接收问题

• 前端AJAX携带id参数发起POST请求，控制台可打印到正确的id值，但XHR请求payload显示[object Object]，后端始终无法接收该参数
• 后端控制器预期通过$this->request->getVar('id')获取参数，实际接口固定返回success=0、msg="No Task To Delete"的响应
• 控制器内直接调用$request->getMethod()、$request->isAjax()会触发严重错误，返回值为空

相关代码 #

前端AJAX代码：

$(document).on('click', '.delete-task', function(event){
    // id comes from data-id
    let id = $(event.currentTarget).attr('data-id');
    $.ajax({
        url:  ajaxUrl+'/admin/tasks/delete',
        type: 'POST',
        // what data you passing.
        data: {
            'id' : id
        },
        processData: false,
        contentType: false,
        dataType: 'json',
        success: function(data) {
            console.log(data);
        }
    });
});

路由配置：

$routes->match(['get', 'post'], '/admin/tasks/delete', 'Admin\Task\Task_Controller::task_delete');

后端控制器代码：

public function task_delete(){
    $id = $this->request->getVar('id');
    if(empty($id)){
        $response = [
            'success' => 0,
            'msg' => "No Task To Delete",
        ];
        echo json_encode($response);
    } else {
        $task = new TaskModel();
        $task->task_delete($id);
        $response = [
            'success' => 1,
            'msg' => "Task Deleted",
        ];
        echo json_encode($response);
    }
}

前端配置错误 #

processData: false和contentType: false是*仅用于传递FormData对象（比如文件上传场景）*的专属配置，传递普通JS键值对对象时开启这两个配置会导致两个问题：

• processData: false会阻止jQuery将JS对象序列化为id=xxx格式的标准表单参数字符串，直接调用对象的toString方法将内容写入请求体，最终出现payload显示[object Object]的现象
• contentType: false会阻止请求自动携带application/x-www-form-urlencoded的标准表单请求头，后端无法按照常规表单规则解析请求体中的参数

后端变量引用错误 #

控制器方法内直接调用$request->getMethod()、$request->isAjax()报错，是因为方法作用域内不存在$request这个局部变量，属于未定义变量调用的致命错误，和参数接收失败无关。

前端修复 #

删除AJAX配置中的processData: false和contentType: false两行即可，普通键值对传参场景下jQuery的默认配置会自动完成参数序列化和请求头设置，修正后的AJAX代码：

$(document).on('click', '.delete-task', function(event){
    let id = $(event.currentTarget).attr('data-id');
    $.ajax({
        url:  ajaxUrl+'/admin/tasks/delete',
        type: 'POST',
        data: {
            'id' : id
        },
        dataType: 'json',
        success: function(data) {
            console.log(data);
        }
    });
});

后续如果需要传递带文件的FormData数据，再恢复这两个配置，此时data字段必须传入FormData实例，不能传入普通JS对象。

后端修复 #

• 所有请求实例相关的调用统一使用$this->request，不要直接调用未定义的$request变量。例如打印请求方法使用log_message('error', $this->request->getMethod())，判断AJAX请求使用$this->request->isAJAX()
• 修复后可先在控制器内打印$this->request->getPost()，确认POST参数数组中已包含id字段，再进行后续业务逻辑处理。如果仍无法获取参数，检查框架是否有全局请求过滤器改写了POST参数内容。

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