CakePHPでjQueryのAjaxを使う方法

CakePHPでAjaxを使う方法をご紹介していきます。
Ajax処理を書くとき、CakePHPでは色々な手法があるので簡単にまとめていきます。

また、下記の記事でも改めて解説していますので御覧ください。
CakePHPでJSONを返すAPIを作る

初めてCakePHPでajaxを使った時にMissingViewでハマり、
CakePHP×Ajaxを解説しているサイトが見当たらず苦戦した思い出があります。
非常に便利なAjaxですが、CakePHPで使用する場合はAction側で一手間加えてやる必要があるのです。
ということで今回はCakePHPでAjaxを使う方法について解説します。

注：
CakePHPにはAjaxHelper(JsHelper)が用意されていますが、今回は使いません。
というのも、個人的に使い勝手があまり良くない印象があるので。
（そもそもjavascriptはjsファイルにまとめてしまいたい。）

ajaxの準備をする

まずはjavascript。

function ajaxMethod() {
    $.ajax({
        url: "/CakeProj/Test/ajaxTest",
        type: "POST",
        data: { name : "tanaka" },
        dataType: "text",
        success : function(response){
            //通信成功時の処理
            alert(response);
        },
        error: function(){
            //通信失敗時の処理
            alert('通信失敗');
        }
    });
}

jsファイルじゃなくてヘッダータグにscriptを書く人は
是非HtmlHelperのurl関数を使ってください。動作環境に合ったURLを出力してくれます。

    echo $this->Html->url(array('controller' =>'Test','action' => 'ajaxTest'));

次にHtml。シンプルに。

<button onclick="ajaxMethod();">ajaxTest</button>

手抜きでonclick属性使ってみたけど非推奨？
知っている方がいればご教示くださいm(__)m

基本的にHTML上で書くのは好ましくないみたいです。
HTMLは構造だけを示すので、こういうイベントとかはjsに分離したほうがいいとのこと。

仕上げにCakePHPのアクション側。

class TestController extends AppController {
    function index() {
        //初期表示処理
    }

    /**
     * Ajax用関数
     */
    function ajaxTest() {
        $this->autoRender = FALSE;
        if($this->request->is('ajax')) {
            return $this->data['name']."さん、こんにちは";   //echoでもOK
        }
    }
}

ポイントがこのajaxTestアクション。
$this->request->is(‘ajax’);でAjaxによる通信かどうかを判定します。
アドレス直打ちでアクセスされるとあまりよろしくないので、Ajax判定は極力行いましょう。

そして一番大事なのが10行目の$this->autoRenderという変数。
これはCakePHPのレンダー機能を無効化することができます。
どういうことかというと、CakePHPではアクション名と紐づくViewのctpファイルを自動で出力(レンダー)します。
この機能が有効化のままだと、処理がアクション関数を通った後にアクション名「ajax_test.ctp」を探しに行ってしまい、MissingViewが返ってきます。

それを防ぐため、$this->autoRender = FALSE;とすることでレンダー機能を無効化し、適切な値だけをreturnやechoで返すことができます。

CakePHPでAjaxを使う時のまとめ

is(‘ajax’)を使ってAjax判定をする。
autoRenderにFALSEを代入し、レンダーを無効化する。

こんな感じです。
僕はautoRenderをしっかり理解していなかったので、
始めてCakePHPでAjaxを使った時はハマりました。。。

[CakePHP]CakePHPでjQueryのAjaxを使う方法

ajaxの準備をする

CakePHPでAjaxを使う時のまとめ

コメント