CakePHPでAjaxのPOST送信

スポンサーリンク
【お知らせ】 英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください!
画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

CakePHP 開発で、プルダウンメニュー(HTML の select/option タグ)が変更された場合に、Ajax リクエストで POST 送信したい機会があったのでメモ。Rails の Ajax 送信で使う remote: true のような簡単なやり方はできないっぽくて、Ajax 送信する部分の JavaScript/jQuery は自力で書く必要がありました。

— 環境 —
PHP 5.5.19
CakePHP 3.1.1

スポンサーリンク

管理画面のユーザー一覧ページで、role(役割)のプルダウンメニュー選択が変更された場合に(onChange イベント)、Ajax の POST 送信で role カラムの値を更新できるようにしたかった。以下このケースを例としたコードです。

テンプレートでプルダウンメニュー作成

テンプレートでは、普通に select のプルダウンメニューを作成する。後述しますが、Ajax 送信するために、JavaScript 側の webroot/js/admin_users_index.js を読み込むようにします。

src/Template/Admin/Users/index.ctp

ユーザー一覧(index)の画面でユーザーの id を JS 側に渡す必要があったので、onChange 属性をオプションで追加しています。こういう書き方は今はちょっとまずいかもですけど…管理画面ですし、とりあえず先に進むの優先で。

JavaScript 側コードで Ajax の POST 送信

ユーザーの ID を受け取って、そのユーザーの role カラムを更新する changeRole() 関数を実装しました。この中で Ajax で POST 送信する。jQuery を使っています。

webroot/js/admin_users_index.js

CakePHP 3 の場合、JavaScript は webroot/js 以下に書くらしい。このあたりの Asset 管理は、Rails とはちょっと違う感じです。

また、POST 送信先として /admin/users/role/1 のような URL を指定しているので、この後コントローラーで、ユーザー ID を引数として受けとる role アクションを実装する。

コントローラーで管理画面の Users#role アクションを実装

Ajax リクエストでの POST 送信により、ユーザーの role カラムを更新するアクションをコントローラーに実装します。

src/Controller/Admin/UsersController.php

beforeFilter() に書いているコードは、管理画面からの Ajax リクエストの場合には CSRF 対策を一時的に無効にするためです。ここちょっとはまりまして、最初 CSRF 対策が有効の状態で、Ajax での POST 送信時に “CSRF token is mismatch” のエラーが出ました。

本来は Ajax リクエストでも CSRF 対策を行ったほうが良いかと思いますが、このケースの場合は管理画面内で、isAuthorized() で管理者ユーザーにのみアクションを認可していることもあり、ちょっと手抜きしました。Ajax リクエストでも CSRF トークンのチェックを行うには、末尾の参照先リンクをご参考お願いします。

以上 CakePHP 3 で Ajax の POST 送信を行う例でした。もっと簡単なやり方があったらご連絡ください!

スポンサーリンク
私は Ruby on Rails の前は、PHP & CakePHP を使っていました(今も使いますけど)。PHP についてはオライリーの本を中心に軽く10冊以上は読み込みました。
スポンサーリンク
 
Twitterを使っていますのでフォローお願いたします!ブログの更新情報もつぶやいてます^^
(英語学習用)

Leave Your Message!