CakePHP3でAjaxを使った時にデータがjsonにならなくて困った時の対処法

24 回閲覧されました

公開日 : 2024年11月13日
最終更新日 : 2024年9月25日

みなさんこんにちは、jonioです。

CakePHPでテンプレートでAjaxを使った時にコントローラーにデータが渡ってコントローラーからjsonデータをテンプレートに返しますがコントローラーから送るデータがなぜかjsonにならずに苦労して対応した話です。

1 CakePHPのバージョン
2 jsonデータにできなかった時の状況
3 原因
4 対応

CakePHPのバージョン

3.6です。

jsonデータにできなかった時の状況

コントローラーに下記の記述をしていました。

$data = $this->getRequest()->getData('user_id');

$user = $this->Users->get($data);

$this->set(compact('user'));
$this->set('_serialize', 'user');

コントローラーから返すデータは下記の形式になります。

$user = [ 
            'id' => 1, 
            'name' => 'John Doe'
];

そしてテンプレートに下記の記述をしました。


$.ajax({
    url: '/timerecorders/shared/attendance-logs',
    method: 'GET',
    data: { user_id: selectedUserId },
    dataType: 'json',
    success: function(response) {
        console.log(response);
        
            ・
            ・
            ・

responseはjsonデータになるので下記の形式にならないといけません。

{ "user": { "id": 1, "name": "John Doe"　} }

しかし下記になりました。

(4) [{…}, {…}, {…}, {…}]

jsonデータではありませんでした。

原因

恐らく下記のコードです。

$this->set(compact('user'));
$this->set('_serialize', 'user');

これを使う時は「$this->response = $this->response->withType(‘application/json’);」の記述もしないといけないみたいですがうまくいきませんでした。

他にも記述しないといけない内容があるか記述自体が間違っているのかもしれません。

対応

コントローラーのコードを下記に変えました。

$data = $this->getRequest()->getData('user_id');

$user = $this->Users->get($data);

return $this->getResponse()->withType('application/json')->withStringBody(json_encode(['user' => $user]));

このコードだと5行目だけでデータをjsonにできます。

テンプレートで確認したら下記になっていました。

{user: {…}}

期待していたjsonのデータです。