[CakePHP]CakePHP 2.x 系で Ajax を利用する

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 側では特にやることはないんですが、実行する URL は CakePHP の HTML ヘルパーで生成した方が良いので、 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に格納された結果を元に何かしらの処理を実装する
}

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

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

最後に

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

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

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