CakePHP2.x系でAjaxを利用する

2017年6月19日

CakePHPを利用したシステムの開発でAjaxでの通信の必要があったんですが、思ったよりも手こずったので、その辺の注意事項などをまとめてみました。

環境

  • PHP: 5.5.x
  • CakePHP: 2.1.1
  • jQuery: 1.9.1

Controllerの実装

実際にAjaxで実行する処理を実装していきます。

App::uses('AppController', 'Controller');

class SampleController extends AppController {
    public function hoge() {
        // HTMLを描画しないようにする
        $this->autoRender = false;
        // Ajax通信でこのアクションが実行された時だけ処理を行う
        if ($this->request->is('ajax')) {
            // 送られてきたリクエストデータを取得する
            $piyo = $this->request->data['piyo'];

            // 必要な処理を実装していく

            // 戻り値を返却する
            return json_encode('処理成功');
        }
    }
}

今回はJSON形式でデータのやりとりを行うので、戻り値を返却する際には忘れずにjson_encodeしておきます。

Viewの実装

Javascriptの処理自体は別ファイルで実装しているので、View側では特にやることはないんですが、実行するURLCakePHPHTMLヘルパーで生成した方が良いので、URLの生成と処理の呼びだし部分を実装していきます。

// 省略

<script>
// 何かしらボタンが押された時に処理が実行される
$('button').click(function() {
    // URLを生成する
    var url = "<?=$this->Html->url(array('controller' => 'Sample', 'action' => 'hoge'))?>";
    // Ajaxの処理を呼び出す
    execAjax(url);
});
</script>

// 省略

HTMLヘルパーを使ってURLを生成しておかないと、実行環境が変わった場合に動かなくなる可能性があるので要注意です。

Javascriptの実装

Ajaxの処理を実装していきます。

function execAjax(url) {
    $.ajax({
        url: url,
        async: false,
        type: "POST",
        data: {
            piyo: '処理するよ〜'
        },
        dataType: "JSON",
        error: function (jqXHR, textStatus, errorThrown) {},
        success: function (data, textStatus, jqXHR) {
            // このスコープで処理を行う必要があれば実装する
            result = data;
        }
    });
    // resultに格納された結果を元に何かしらの処理を実装する
}

ajaxasyncfalseにすると非同期処理がオフになるので、この処理が完了するまで次の処理に進みません。

非同期通信の結果を元に次の処理を行う必要がある場合には忘れずにasyncfalseに設定しましょう。

最後に

CakePHPでの非同期処理について簡単にまとめてみました。慣れてるとそんなに難しいものではないと思いますが、初めて実装する場合は結構戸惑うところが多く時間がかかってしまいました。

非同期処理だとサーバ側のデバッグも面倒だったりするので、その辺も加味して実装する際は完了までの時間を見積もる必要があると思います。

もし、CakePHPAjaxがうまく使えてないのであれば、ぜひ参考にしてもらえればと思います。