Codeigniter 4 Ajax 请求错误“不允许你请求的操作”。

问：

我使用 Codeigniter 4 运行 Ajax 请求：

这是我的路由.php代码

## CLIENT PLAN
$routes->get('plan_add', [Plans::class,'index'],['filter' => 'auth']);
$routes->post('plan_add', [Plans::class,'planAdd'],['filter' => 'auth']);

这是我的 Controler 代码 planAdd 方法

 public function planAdd(){
$plan = model(PlansModel::class);
    $validation = Services::validation();
    $request = service('request');
    $postData = $request->getPost();
    var_dump($postData);
    echo '<hr/>';
    die;

}

我将 js 文件和视图文件分成两个文件。 这是JS文件：

    // ajax request
    $('#plan_add_form').on('submit', function () {
        var formElement = document.getElementById('plan_add_form');
        // console.log(formElement);return;
        var formData = new FormData(formElement);
        // console.log(typeof formData);return;
        $.ajax({
            type: 'post',
            url: $('#form_action').val(),
            data: {[csrfName]: csrfHash ,query : formData},
            dataType: 'JSON',
            beforeSend:function () {
                // return false;
                console.log('before send');
            },
            success: function (res) {
                // return false;
                console.log('success');
            },
            error: function (e) {
                // return false;
                console.log(e.responseText);
            }
        })
    });

这是视图文件

<script>
    var csrfName = '<?= csrf_token() ?>';
    var csrfHash = '<?= csrf_hash() ?>';
</script>
<form method="post" action="javascript:void(0)" id="plan_add_form" autocomplete="off" >
            <?= csrf_field()?>
            <table class="table table-bordered" id="plan_table" style="width: 90%;margin: 0 auto"  >
<tr>
                    <td><input type="text" name="fac[]" /></td>
                    <td><input type="text" name="name[]" /></td>
                    <td><input type="text" name="asset[]" style="width: 100px" data-bs-type="number" /></td>
                    <td><input type="text" class="datepicker date text-right" style="width: 150px;" data-date-format='Y-mm-D' value="<?= date('Y-m-d') ?>" id="buy_date" name="buy_date[]"/></td>
                    <td><input type="text" name="qte[]" id="qte_1" data-bind="value:replyNumber" style="width: 50px" /></td>
                    <td><input type="text" class="datepicker date text-right" style="width: 150px;" data-date-format="Y-mm-D" value="<?= date('Y-m-d',strtotime('next monday')) ?>" id="ship_date" name="ship_date[]"/>
                    </td>
                    <td><input type="text" class="datepicker date text-right" style="width: 150px;" data-date-format="Y-mm-D" value="<?= date('Y-m-d') ?>" id="use_date" name="use_date[]"/>
                    </td>
                    <td><input type="text" style="width: 75px" class="text-right font-weight-bold" disabled readonly name="total[]" /></td>
                    <td><button type="button" class="btn btn-danger remove" name="remove[]" aria-label="Remove">remove</button></td>
                </tr>
<tr>
                    <td colspan="9">
                        <div class='text-right float-right' style='margin-right: 20px'>
                            <a href='javascript:void(0);' id='new_line' class='btn btn-info pull-right'
                               style='margin-top:7px;margin-right: 5px'>
                                <button type='button' class='btn btn-info'>Add Line</button>
                            </a>
                            <a href='javascript:void(0);' id='save_data' class='btn btn-success pull-right'
                               style='margin-top:7px;margin-right: 25px'>
                                <button type="submit" class="btn btn-success">save</button>
                            </a>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </form>

当我单击保存按钮保存数据时。 它返回一条消息：“您请求的操作是不允许的。

我阅读并尝试了一些博客内容：Codeigniter ajax post 您请求的操作是不允许的，但是这篇文章帮不了我。