エス技研

WordPress、CakePHP、PHP、baserCMSなどの Web系システムを中心に情報を提供します!


CakePHP3で Ajaxを使う方法の解説。3.6以降対応。Successとthenの両方を解説。

      2020/01/02

CakePHP3で Ajaxを使う方法の解説-3.6以降対応

 

CakePHP 3.6で CsrfProtectionMiddlewareがデフォルトで有効になった

 
CakePHP3で Ajaxを使ってデータベースからデータを取得する処理を、サンプルソースを使って解説します。
今回の解説のサンプルソースは CakePHP 3.6以降対応となっています。
 
 
CakePHP 3.6以降では、「CsrfProtectionMiddleware」がデフォルトで有効になるようになりました。
そのため、Ajaxで POSTするときも CSRFトークンを一緒に送信しないと「Error: [Cake\Http\Exception\InvalidCsrfTokenException] CSRF token mismatch.」のエラーが出るようになりました。
そのため、CakePHP 3.6より前のサンプルソースはそのままでは動かないものが多数存在することになってしまいました。
 
 
対処方法としては、実験環境であるならば「CsrfProtectionMiddleware」をオフにするという方法も取れますが、本番運用を想定している場合はセキュリティホールになりえますので、CSFRトークンも一緒に送信する方法を実装すべきでしょう。
 
この記事では、CakePHP 3.6以降でも動作するよう、CSRFトークンも一緒に送信する仕様になっています。
 
 
また、サンプルソース中に出てくる「Topics」のテーブルは、「お知らせ情報」が入っているテーブルで、テーブルレイアウトは「CakePHP3で保存前にバリデーション結果を取得する2つの方法」の記事にあるような内容を想定してください。
テーブルからデータを取得するという処理になっていますが、サンプルソースでは「print_r()」で出力するだけですので、テーブル構造はほぼ関係はありません。
 
 

CakePHP3で Ajaxでレコードを取得するサンプルソースの処理概要

 
CakePHP3で Ajaxを使う方法の解説。3.6以降対応。Successとthenの両方を解説。
 
上記の画像のプルダウンの数値を変更すると、その数値に該当する IDのレコードを取得して、「初期表示」と書かれている場所にそのレコードの情報を表示する、という仕組みの処理です。
 
例えば、
「商品の検索システムで、「カテゴリ」を変更すると「検索」ボタンを押すことなく直ぐに検索結果の商品一覧の内容が切り替わる」
というような仕組みのものを想定しています。
 
 
このサンプルは、「AjaxSamples」というコントローラー名で処理を作成しています。
 
また、Ajaxを処理する方法として、「Success/Error」でレスポンスを受ける方法と、「then()」メソッドで受ける方法と、2つを記述しています。
実際に作成する場合はどちらかだけで OKですので、記述する内容は半分になります。
 
 

テンプレートファイル「index.ctp」

 
まず最初に、テンプレートファイルとなる「index.ctp」を作成します。
 
パス付きのファイル名は以下になります。
/src/Template/AjaxSamples/index.ctp
 
 

 
 
前半が「Success/Error」でレスポンスを受ける処理の部分で、後半が「then()」メソッドで受ける処理の部分です。
 
「id=”index-area-success”」「id=”index-area-then”」と記述している箇所をそれぞれ置換する仕組みになっています。
 
 
また、CakePHP 3.6以降では、CSRFトークンも一緒に送信する必要がありますので、「$this->Form->create()」~「$this->Form->end()」を利用して、CSRFトークンが出力されるようにしておく必要があります。
 
 
また、titleタグや h1タグを編集する方法については下記の記事を参考にしてください。
CakePHP3で /Layout/defult.ctpにある titleタグ、h1タグを編集する方法
 
JavaScriptをページごとに指定する方法については下記の記事を参考にしてください。
CakePHP3でページごとに読み込むJavaScript、CSSを変える処理の解説
 
 

置換するテンプレートファイル「replace_index_area.ctp」

 
前項の「index.ctp」はベースになるテンプレートファイルで、こちらは、Ajaxで差し替えるテンプレートファイルになります。
 
パス付きのファイル名は以下になります。
/src/Template/AjaxSamples/replace_index_area.ctp
 
 

 
 
今回はサンプルということで、Topicsテーブルから取得した変数「$topicsList」を「print_r()」で出力すると言うだけのシンプルなテンプレートです。
 
このテンプレートの内容を、事項の JavaScriptで「index.ctp」の該当の場所に編集します。
 
 

Ajaxで呼び出されるアクションのコントローラー「AjaxSamplesController.php」

 
最初の画面を表示する「index」アクションと、Ajaxで呼び出される「replaceIndexArea」アクションの 2つの処理が記述されているコントローラーです。
 
パス付きのファイル名は以下になります。
/src/Controller/AjaxSamplesController.php
 
 

 
各処理にコメントを書いていますので問題ないかと思いますが、Ajaxから「replaceIndexArea」アクションを呼び出します。
 
CSRFトークンを受け取ってチェックする処理は、ミドルウェアとして処理されますので、コントローラーでなにか特別な処理を記述する必要はありません。
 
 

Ajaxとして処理を実行する JavaScriptファイル「send_ajax_samples.js」

 
プルダウンを変更した際、Ajaxとして処理を実行する JavaScriptファイルです。
 
パス付きのファイル名は以下になります。
/webroot/js/send_ajax_samples.js
 
 

 
この処理も各コマンドごとにコメントで説明を書いていますので、分かってもらえるのではないかと思いますが、Ajaxを処理する方法として、前半が「Success/Error」でレスポンスを受ける方法、後半が「then()」メソッドで受ける方法の処理になっています。
 
 
詳しい内容は下記の記事を参考にしていただければ、と思いますが、「Success/Error」でレスポンスを受ける方法は、jQuery1.4の頃の古い書き方なのだそうです。
 
この記事のサンプルで書いてあるような単純な処理ならば、「Success/Error」で受け取る処理でも特に問題は発生しませんが、複数の Ajaxの処理が絡む場合は、「then()」メソッドで受ける方法を用いると、スッキリした記述をすることができるそうです。
https://qiita.com/tonkotsuboy_com/items/0722ad92f370ab0c411b
 
 
CakePHP 3.6以降の処理の場合は、CSRFトークンを「beforeSend」で送信する処理が必要になります。
 
 
また、「(デバッグ用)」とコメントで書いている「alert()」の処理は、正しく処理がされていることを確認するための処理ですので、必要ない場合は削除してしまって問題ありません。
エラーの場合の処理も本番環境では不要な場合も多々あるでしょう。
 
 

CSRFコンポーネントを無効にする方法

 
今回のサンプルは、CSRFコンポーネントが有効な状態での対処方法を解説しましたが、CSRFコンポーネントを無効にする方法も用意されています。
 
具体的には下記の内容を Controllerに追加します。
 

 
 
詳しくは下記の Cookbookを参照してください。
 
CakePHP3 Cookbook クロスサイトリクエストフォージェリ
 特定のアクションで CSRF コンポーネントを無効にする
https://book.cakephp.org/3.0/ja/controllers/components/csrf.html#id2
 
記事内に「非推奨ですが」とある様に、可能であれば CSRFを有効にする仕組みを導入するように作るべきですが、一時的に、もしくは、違う方法で安全が確保されている場合などは CSRFコンポーネントを OFFにして使う場合もあるでしょう。
 
 

CakePHP3の関連記事

CakePHP4のCSS、JavaScript、画像のブラウザへのキャッシュをコントロールする
CakePHP3でレコードを保存(追加、更新、Insert、Update)する複数の方法を紹介
CakePHP3でモデルなしフォームからCSVをアップロードしレコードを更新する方法解説
CakePHP3でPHP Simple HTML DOM Parserを使ってスクレイピングする方法
CakePHP3のInsert On Duplicate Key Update(upsert)構文を解説・バルク処理も
CakePHP3の1対多での連携を中間テーブルを使った多対多の連携に変更するときの手順
CakePHP3でデフォルトのソート条件を設定してユーザの選択肢たソート条件を有効にする方法
CakePHP3で Ajaxを使う方法の解説。3.6以降対応。Successとthenの両方を解説。
CakePHP3でパンくずの指定は HTMLヘルパーを使って指定する方法を解説
CakePHP3にOGPをfetch、asignを利用してテンプレートごとに指定する方法を解説
 
その他の「CakePHP3」に関する記事一覧
 
 

 - CakePHP 3.x 4.x 5.x

GoogleAdwords

GoogleAdwords

最後までお読みいただきましてありがとうございます。
この記事が参考になったと思いましたらソーシャルメディアで共有していただけると嬉しいです!

Message

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

下記の空欄を埋めてください。 * Time limit is exhausted. Please reload CAPTCHA.

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

※入力いただいたコメントは管理者の承認後に掲載されます。

  関連記事

CakePHP3の1対多での連携を中間テーブルを使った多対多の連携に変更するときの手順
CakePHP3の1対多での連携を中間テーブルを使った多対多の連携に変更するときの手順

CakePHP3で「1対多」の連携を中間テーブルを利用した「多対多」の連携に変更するときの手順のまとめ。中間テーブルの設定やModelの変更などを間違いやすい箇所を指摘しながらの解説。

CakePHP4、CakePHP5系の認証処理でログインの有無の確認、ユーザ情報の取得の方法
CakePHP4、CakePHP5系の認証処理でログインの有無の確認、ユーザ情報の取得の方法

CakePHP4系、5系のログイン認証の可否のチェック、および、ログインユーザの情報を取得する方法のまとめ。複数の方法があるが手続きが微妙に異なるためまとめてみた。

CakePHP4、5の認証処理で認証が通らない際の確認方法と確認箇所の紹介
CakePHP4、5の認証処理で認証が通らない際の確認方法と確認箇所の紹介

CakePHP4、5系の認証処理でログイン認証が通らない場合の確認方法、確認箇所を解説。ログ出力し、ステータスを確認するが、ステータスの内容も紹介。それはそのままusernameを変更する際のポイントでもある。

CakePHP3でユーザ定義の定数、変数を設定し、読み込む方法解説
CakePHP3でユーザ定義の定数、変数を設定し、読み込む方法解説

CakePHP3で定数や共通で使う変数をまとめて設定し、プログラム内で読み込む方法を、bootstrap.phpに直接記述する方法と定数ファイルを分ける方法の3つの方法で解説。

CakePHP4、5で$_SERVERと同じようにURIを取得する「getUri()」の紹介
CakePHP4、5で$_SERVERと同じようにURIを取得する「getUri()」の紹介

PHPでサーバ情報、環境情報を取得する際は「$_SERVER」を利用するが、似たような情報をCakePHPの関数で取得する際は「getUri()」を使用する。取得出来る値は一致するものもあるが、違うものもあり便利な使い方もある。

CakePHP 2.3でファイルをアップロード・その2 ファイル名を乱数で設定

CakePHPのアップロードするファイル名を乱数で変更しセキュリティを高める方法を解説。

CakePHP3でWarning Error: SplFileInfo::openFile()エラーが発生した場合の対処方法
CakePHP3でWarning Error: SplFileInfo::openFile()エラーが発生した場合の対処方法

CakePHP3のキャッシュファイルのパーミッションエラー Error: SplFileInfo::openFile()が発生した場合の対応方法解説。app.phpにキャッシュファイルのパーミッション設定を行い、既存のファイルは削除。

CakePHP 2.3で PDFを作成する方法を調査「mpdf」「TCPDF」「FPDF」

CakePHPで PDFを編集、出力するには「mpdf」「TCPDF」「FPDF」といったプラグインがあり、使い勝手を比較検討しました。TCPDFが一番良さそうでした。

CakePHP3のCakeDC/Usersでログインユーザの所有レコードのみ更新、削除する権限管理の設定方法
CakePHP3のCakeDC/Usersでログインユーザの所有レコードのみ更新、削除する権限管理の設定方法

CakePHP3のユーザ管理、ログイン認証プラグイン「CakeDC/Users」の権限管理を行う方法やアクセスできるコントローラー、アクションを設定、所有権を持つレコードのみ更新できる設定方法を解説。

CakePHP4で「app_local.php」「.env」を利用して環境ごとの定数を振り分ける方法
CakePHP4で「app_local.php」「.env」を利用して環境ごとの定数を振り分ける方法

CakePHP4で.env、app_local.phpに定数を定義してそれを呼び出す方法の解説。Gitでは管理せず本番環境と開発環境とで異なる定数を定義するためそれを利用する方法。