CakephpでAjax controller編 | Webエンジニアブログ

ajax化の方法は複数存在する

cakephpにおけるajax関連の情報は意外と少ないと思っているのでajax関連のノウハウもブログに書いてみようと考えている。フォームなりリンクをajax化すると途端に処理が複雑になる。しかし、自分のノウハウを確立してしまえばそれほど難しいことにはならない。ajax化の方法が複数あるため、webの情報が良く言えばバラエティに富んでしまっているのではないだろうか。

ajaxには2種類あって、

フォームのajax化
リンクのajax化

がある。

Cakephpでフォームをajaxにする

コントローラ側の全体像

最初にフォームのajax化について考えてみたい。そして、cakephp上でのajaxのノウハウになるので、controllerから着手してみたい。

public $components = array( 'RequestHandler' );

public function index() {
    if( !$this->request->is('ajax') )
    {
        //ajaxリクエストではない場合
    }
		
    else
    {
        //ajaxリクエストの場合
        if( $this->MODEL->save($this->data) )
        {
            $this->render('/Elements/Ajaxs/ajaxupdated', 'ajax');
        }
    
        else
        {
	    $this->set('valerr', $this->MODEL->validationErrors);
	    $this->response->statusCode(400);
	    $this->render('/Elements/Ajaxs/ajaxupdated', 'ajax');
        }
    }
}

コントローラ側では、上のコードがajax処理の基本かなと考えている。

ajaxリクエストの判定

最初にRequestHandlerコンポーネントを読み込んでいる。このコンポーネントによりajaxリクエストなのかそうではないのか判定することが可能になる。同じコントローラ、同じアクション内で通常のリクエストとAjaxリスクエストを処理する場合には、上記のようにajaxリクエストを適切に判定する必要がある。

バリデーション

ajaxリクエストの場合で、フォームからの受けたデータをdbに格納する場合には、サーバ側のvalidation処理を行うのが一般的というか、必須だったりする。

$this->MODEL->save($this->data)

で値のバリデーションとデータのdbへの格納を行ってくれる。

リクエストの結果として部分テンプレートを返す

バリデーションがOK/NG問わず、部分テンプレートを返すようにしてある。部分テンプレート側で、バリデーションの結果によって異なる処理をする必要がある場合は、NGの場合のみvalerrというデータを部分テンプレートに渡すようにしてある。

必要がある場合と書いてみたが、valerrにはcakephpのモデルから返されたバリデーションのエラー箇所やエラーメッセージが格納されている。そのため、部分テンプレート側ではバリデーションの結果により異なる処理をすることになる。具体的には、NGの場合にはエラーメッセージをHTML化した部分テンプレートを返すことになる。

エラーの場合はajaxリクエストに対してHTTPエラーを返す

バリデートエラーの場合には、もう一つ補足しておきたいコードが書いてある。

$this->response->statusCode(400);

これはcakephpで意図的にHTTPステータスコード400を返すコードである。意図してHTTP400を返すことによりAjaxリクエストに対してエラーが生じたことを明示的に知らせるために上のコードが必要なため書いてある。エラーの場合にはajaxリクエストはerrorレスポンスを受けることになる。当然バリデートOKの場合には、400は返されず、デフォルトHTTP200(正常)が返される。その場合、Ajaxリクエストはsuccessというレスポンスを受け取ることになる。（HTTPの400番はBad request）

ajaxリクエストの

success
error

というレスポンスの状態の話になったところで

cakephpでAjax コントローラ編

を終了としたい。

view編に続く

Ajax開発の実例
重く遅いいいねボタンを非同期化して素早くページをロードする