CakePHP4でAjaxを利用する with csrfToken

やること

セレクトボックスの値が変わったら、選択された値を取得して、一旦コントローラーに送信し、返却。
返却された値をテキストボックスに挿入。ということをやってみます。

確認環境

• CakePHP 4.2.9
• jQuery 3.6.0

Templates

index.php

<div class="index content">
    
    <select id="kicker">
        <option value="1">サンプル1</option>
        <option value="2">サンプル2</option>
        <option value="3">サンプル3</option>
    </select>
    
    <input type="text" id="target" disabled>
    
</div>

<script>
    $("#kicker").on("change", function(){
        var send_data = {selected:$('option:selected').val(), add_key:'add_value'};

        $.ajax({
            type: "post",
            url: "<?= $this->Url->build(['controller' => 'Samples', 'action' => 'receiver']) ?>",
            data: send_data,
            headers: { 'X-CSRF-Token' : "<?= $this->request->getAttribute('csrfToken') ?>" },
        }).done(function(response){
            $("#target").val($.parseJSON(response));
        }).fail(function(jqXHR){
            console.error('Error : ', jqXHR.status, jqXHR.statusText);
        });
    });
</script>

大事な点

headers: { 'X-CSRF-Token' : "<?= $this->request->getAttribute('csrfToken') ?>" },
headersに'X-CSRF-Token'がないと403エラーになるので気を付けてください。
ちなみにbeforeSendでもできましたが、なんか使い方違う気がした()のでheadersにしました。
どうしてもajax処理より先にcsrfを送らないといけない場合は使うかも。

url: "<?= $this->Url->build(['controller' => 'Samples', 'action' => 'receiver']) ?>",
urlの生成はCake3系からHtml->urlではなくUrl->buildに変更になってます
ちなみにurlは文字列で'samples/receiver'でもいけます

Controller

SamplesController

<?php
declare(strict_types=1);

namespace App\Controller;

/**
 * Samples Controller
 */
class SamplesController extends AppController
{
    
    public function index(){}
    
    public function receiver(){
        $this->autoRender = false;
        $data = $this->request->getData();
        echo json_encode($data['selected']);
        //echo json_encode($data['add_key']);
    }
}

$this->autoRender = false;がないと500エラーになっちゃうので気を付けてください。
getData()で取得して、そのままecho json_encodeして返すだけです。'add_key'の方を取得すると'add_value'が取れます。
取得した値を元にDBにデータを検索、listで取得してそのまま返して動的なセレクトボックスとか作れると思います。

まとめ

とにかく調べても調べても最低限の知識で作られたサンプルがなくて…
とりあえずここまでできれば後は皆でどうにかしてくれるよね？