参考にさせて頂いたページ
以前作成したお問い合わせフォーム
以前以下の記事でお問い合わせフォームを作成したので、試しにcontactsテーブルのデータを非同期で取得してみようと思う。
さくらvpsとcakephp2.6.7で開発日記 その0001 お問い合わせフォームの作成をする - MOTOMICHI WORKS BLOG
app/View/Contacts/index.ctpにボタンを置く
「CakePHPとJSONでAjax用APIを作る方法」の記事にならって進めていきます。
以前の記事で作成したindex.ctpに以下のようなボタンを追記した。
<button class="ajaxBtn">find_contacts</button>
app/Controller/AjaxController.phpの作成とその記述内容
例として以下の通り。
<?php App::uses('AppController', 'Controller'); class AjaxController extends AppController { //使用するModel public $uses = array('Contact'); public function find_contacts() { //Ajaxでリクエストを送る為のアクションなので、Viewの描画を無効化 $this->autoRender = false; //Ajax以外の通信の場合 if(!$this->request->is('ajax')) { //400 Bad Request エラー throw new BadRequestException(); } //contactsテーブルのデータを取得 $result = $this->Contact->find('all'); //$resultの中身の有無によって$statusにはtrueまたはfalseが格納される $status = !empty($result); //$statusがfalseの場合、つまり$resultが空の場合は$errorにエラー内容を格納 if(!$status) { $error = array( 'message' => 'データがありません', 'code' => 404 ); } //$status,$result,$errorを結合して、JSON形式のデータを返す(js側で変数dataとして使用される) return json_encode(compact('status', 'result', 'error')); } }
find_contact.jsの作成とその記述内容
例として以下の通り。urlのところは適宜変更してください。
$(function(){ $('.ajaxBtn').click(function(){ $.ajax({ 'type': 'get', 'dataType': 'json', 'url': 'https://hoge.com/Ajax/find_contacts/', 'success': function(data) { //通信が成功したときの処理 var list; if(data.status) { //通信が成功して、$this->Contact->find('all');の結果が取得できているときの処理 list = data.result; console.log(list); } else { //通信は成功したけど、$this->Contact->find('all');の結果が空だったときの処理 alert(data.message); } }, 'error': function() { //urlで指定した'https://hoge.com/Ajax/find_contacts/'への通信が失敗したときの処理 //またはアクション側でExceptionが投げられた場合もここに来る } }); }); });
app/Controller/AjaxController.phpのfind_contactsアクションに引数を渡す
CakePHPなので、非同期通信の場合も以下のような感じで、アクション名に続いてスラッシュ区切りで渡せる。
https://hoge.com/コントローラー/アクション/hoge/foo/
おわりに
ほぼ参考ページのままですが、具体例も含めて自分で残しておきたかったので以前の記事と絡めて書かせて頂きました。