2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Ajaxを用いて、コントローラーにjsonデータを渡したい

Last updated at Posted at 2023-11-08

記事作成の背景

普段CakePHPで開発するときってFormhelperなど便利なものを使ってデータ渡して開発を行っていましたが、とある事情からJSで処理してから、コントローラーに渡す必要が出たことでAjaxからCakePHPのコントローラーにデータを受け渡す事ってできるのかなという疑問から作成いたします。

環境

CakePHP4(最新)
JQuery
MySQL

全体の流れ

スクリーンショット 2023-11-08 205435.png

①フォームを記入後、送信ボタンをクリックしイベントが着火

②JQueryでフォームの内容を処理

③データを連想配列に格納

④AjaxでデータのPOST

⑤コントローラー側で受け取り

ざっと簡単にまとめるのこんな感じ

コード

JQueryのコード

  //submitボタンをクリックし、イベントが着火
    $('#submitForm').on('click', function(event) {
        //CakePHPのデフォルトの動作を止めます
        event.preventDefault();
        //配列を定義
        var formData = {};

        $('#questionsForm').find('.info-box').each(function() {
        
           //この部分で処理を行っているのですが、今回のAjaxとは関係ないため割愛
           
        });
        $.ajax({
            type: 'POST',
            url: "<?= $this->Url->build(['controller' => 'AppsController', 'action' => 'PHPaction']) ?>",
            data: JSON.stringify(formData),
            success: function(response) {
                console.log('Received data:', response);
            },
            error: function(xhr, status, error) {
                console.error('Error:', status, error);
            }
        });
        
    });

Controller.phpのコード

public function PHPaction()
    {
        //ビューの自動レンダリングを停止するため
        $this->autoRender = false;
        
        if ($this->request->is('ajax')) {
            $data = $this->request->getData();
            $response = $this->response->withType('application/json')
                ->withStringBody(json_encode([
                    'status' => 'success',
                    'data' => $data
                ]));
            return $response;
        }
    }

感想

当たり前ですが、CakePHPのバージョンで書き方が若干変わるためコントローラーの受け渡しで躓きました。
もし、同じことをやろうとされている方などの参考になればと、情報を共有いたします。
以上

最後まで読んでいただきありがとうございました。
間違ってる箇所ありましたら、教えて頂けると幸いです。
よろしくお願いいたします。

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?