CodeIgniter 4中Ajax请求无法被控制器接收的问题排查

核心问题分析 #

你的Ajax请求无响应的主要原因是CSRF令牌未正确传递，其次是控制器返回方式、按钮默认行为的问题，具体修复方案如下：

1. 修复CSRF令牌配置与传递 #

CodeIgniter 4默认启用CSRF保护，未正确携带令牌的POST请求会被拦截。你的视图代码存在两处错误：

• meta标签中的{csrf_header}和{csrf_hash}是未解析的占位符，需用CI4内置函数生成有效令牌信息
• Ajax代码中的tokenName和tokenVal未定义，导致无法传递CSRF令牌

修改后的视图代码片段：

<head>
    <!-- ...其他meta标签 -->
    <meta name="<?= csrf_header() ?>" content="<?= csrf_hash() ?>">
    <title>Ajax test</title>
</head>

<!-- ...中间内容 -->

<button type="button" id="test">test Ajax</button>

<script type='text/javascript'>
$(document).ready(function() {
    $('#test').on('click', function() {
        $.ajax({
            url: "<?php echo base_url(); ?>/ajaxtest",
            data: {
                '<?= csrf_token() ?>': '<?= csrf_hash() ?>'
            },
            method: "post",
            success: function(response) {
                alert(response.message);
            },
            error: function(xhr, status, error) {
                alert('请求错误: ' + xhr.responseText);
            }
        });
    });
});
</script>

2. 修正控制器返回逻辑 #

CI4控制器直接return字符串无法正确输出Ajax响应，需使用响应对象返回结构化数据，确保前端能正确接收：

修改后的控制器代码：

<?php
namespace App\Controllers;
class AjaxController extends BaseController
{
    public function index()
    {
        if ($this->request->getMethod() == 'post') {
            $responseMsg = 'post request done, ';
            
            if ($this->request->isAJAX()) {
                $responseMsg .= 'the request is ajax';
            } else {
                $responseMsg .= 'the request is not ajax';
            }
            
            // 返回JSON格式响应
            return $this->response->setJSON(['message' => $responseMsg]);
        }
        echo view('layout');
    }
}

3. 修复按钮默认行为 #

原按钮type="submit"即使没有form标签，点击时仍可能触发浏览器默认提交行为，中断Ajax请求，需改为type="button"（已在上面的视图代码中修正）。

为什么Postman请求正常？ #

Postman测试时你可能手动添加了X-Requested-With: XMLHttpRequest头，并且手动设置了CSRF令牌（或在测试环境关闭了CSRF验证），所以请求能正常到达控制器。

内容的提问来源于stack exchange，提问作者J.Pim