Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

さくらvpsとcakephp2.6.7で開発日記 その0018 jQueryを使用してAjaxでテーブルデータを取得する

参考にさせて頂いたページ

CakePHPとJSONでAjax用APIを作る方法

CakePHPでjQueryのAjaxを使う方法

以前作成したお問い合わせフォーム

以前以下の記事でお問い合わせフォームを作成したので、試しに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/

おわりに

ほぼ参考ページのままですが、具体例も含めて自分で残しておきたかったので以前の記事と絡めて書かせて頂きました。