为何AJAX请求无法通过CodeIgniter的is_ajax_request()条件校验？

提交表单时页面直接跳转到.../sendMessage空白页，推测请求未满足控制器中if ($this->input->is_ajax_request() && !empty($post))的AJAX请求校验条件。

前端AJAX代码（原代码存在语法错误） #

$('form.sendMessage').off('submit').on('submit', function (e){
    e.preventDefault();
    var form = $('form.sendMessage');

    if (form.valid(){ // 缺少闭合括号
        $.ajax({
            url: base_url + <?=$moduleUrl?> + '/sendMessage',
            data: form.serialize(); // 末尾多了分号，导致语法错误
            type: 'POST',
            beforeSubmit: function () { // jQuery.ajax无此参数，应为beforeSend
                if (!confirm('Are you sure you want to send this message?')) {
                    return false;
                }
            },
            success: function () {
                toastr.success("Message sent", "Success");
            },
            error: function (response) {
                toastr.error(response, "Error");
            }
        });
    }
) // 闭合顺序错误，应为});
});

后端控制器代码 #

sendMessage方法 #

public function sendMessage()
{
    $post = $this->input->post(null, true);

    if ($this->input->is_ajax_request() && !empty($post)) {
        try {
            $this->sendingMessage($post);
        } catch (Exception $e) {
            $this->output->set_status_header('401')
                ->set_output($e->getMessage());
        }
    }
}

sendingMessage方法 #

private function sendingMessage($post)
{
    if (!empty($post) && (int)$post['device'] > 0 && isset($post['message'])) {
        $this->load->model('protectee/device_messages');
        // 保存到数据库
        $data = [
            'device_id' => $post['device'],
            'user_id'   => $_SESSION['UserID'],
            'message'   => $post['message'],
            'date'      => date('Y-m-d H:i:s'),
        ];
        $messageId = $this->device_messages->insertMessage($data);

        if ($messageId > 0) {
            $this->insertCommand($post['device'], 'MSG', '<br>' . $post['message']);
        } else {
            throw new Exception('Message could not be send! Please try again..');
        }
    } else {
        throw new Exception('An error occured! Please try again..');
    }
}

问题原因及修复方案 #

核心问题：前端代码存在语法错误，AJAX请求未触发，表单走了默认提交流程 #

1. 语法错误修正：
   • if (form.valid(){ 改为 if (form.valid()){（补充闭合括号）
   • data: form.serialize(); 改为 data: form.serialize(),（去掉末尾分号，改用逗号分隔参数）
   • 调整事件绑定末尾的闭合代码：将)和});调换顺序，改为 }); 闭合if判断，再用 }); 闭合事件绑定
2. 参数错误修正：
   • jQuery的$.ajax没有beforeSubmit参数，替换为beforeSend
3. 优化与检查：
   • 用$(this)直接获取当前表单对象，无需重复选择器查询
   • 确保页面已正确引入jQuery库及表单验证插件（如jQuery Validate）
   • 错误回调中改为xhr.responseText，可显示后端返回的具体错误信息

修正后的前端代码 #

$('form.sendMessage').off('submit').on('submit', function (e){
    e.preventDefault();
    var form = $(this);

    if (form.valid()){
        $.ajax({
            url: base_url + <?=$moduleUrl?> + '/sendMessage',
            data: form.serialize(),
            type: 'POST',
            beforeSend: function () {
                if (!confirm('Are you sure you want to send this message?')) {
                    return false;
                }
            },
            success: function () {
                toastr.success("Message sent", "Success");
            },
            error: function (xhr) {
                toastr.error(xhr.responseText, "Error");
            }
        });
    }
});

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