AJAX を使ってページの一部分を動的に書き換えたい、というのはよくある要求です。この記事では CakePHP2 と CakePHP3 を対象に、こうした AJAX リクエストを受けるアクションを CakePHP でどのように実装するのがよいかを解説します。
CakePHP2 での実装例
まずは実装例をご覧ください。記事名から記事検索が行えるようになっていて、その検索結果を AJAX で取得しています。画面下部にソースコード表示用のリンクを用意してありますので、中身がどうなっているのか、ざっと確認してみてください。
それでは順にコードを追っていきましょう。まず AJAX でリクエストを送っている場所は ajax.js の 11 行目の get() です。
受け取った data をそのまま HTML として設定しています。AJAX というと JSON を受け取るイメージがあるかもしれませんが、こんなふうに HTML を返した方がずっと簡単です。ブラウザで直接アクセスして AJAX が返す HTML を確認することができますし、JavaScript のコードも単純になります。
また AJAX で書き換わる部分に初期表示を与えるのも容易です。HTML で初期表示を行うことは SEO の観点からもよいことです。この例でも初期表示として検索条件なしの記事一覧を出しています。
では、実際にこうした初期表示を与える方法を見ていきましょう。この例で初期表示を行っているのは Ajax/index.ctp の 16 行目の requestAction() です。
このメソッドを使うと、サーバーサイドでサブリクエストを作成して任意のアクションの実行することができます。メソッドのリクエスト先が AJAX 用フォームのサブミット先と同じ ajax_search アクションになっていることに注目してください。
こんなふうにすると AJAX のリクエストに返すのと同等の HTML を得ることができて、それを初期表示にも利用することができるわけです。ちなみに、ajax_search アクションとビューはこうなっています。
ところで、この AJAX で HTML を返す方法には実はデメリットもあります。もしも AJAX で書き換える前の HTML にイベントハンドラなどを設定していた場合、書き換え後にそれらが失われてしまうことです。
こうした場合、書き換え後にそれらを設定し直さなければなりませんが、もう少しだけ賢い方法もあります。ajax.js の 19 行目の on() に注目してください。
この例では記事一覧の各リンクに onclick イベントを設定していますが、このイベントが A タグではなく AJAX で書き換わる部分の親ノードに設定してあるのがわかると思います。こうすると、書き換え後にイベントハンドラなどが失われないようになります。
CakePHP3 での実装例
CakePHP3 でも CakePHP2 とほぼ同じように書くことができますので、詳しい解説は省略します。ただし、3.3 以降 requestAction() は非推奨になっていますので、代わりにビューセルを使う方法を紹介したいと思います。
ビューセルを作成したら、index アクションと ajax_search アクションのビューからそれぞれ呼び出します。
ちなみに、PostsController はこんなふうになります。
ビューセルに記事検索処理を移動した都合、ほとんど何もしていませんね。
以上で、AJAX リクエストを受けるアクションの実装方法の解説はおしまいです。この記事が皆様のお役に立ちましたら幸いです。
