CakePHPでjQueryを使ってAjaxする方法

「CakePHPのAjaxヘルパーってprototypeかよ・・・」というjQueryラヴァーへ捧げるエントリー。

jQuery+CakePHPでAjaxしちゃう方法ですよ。例題として簡単なタスク管理システムつくるぜ。

↑ こういうやつ。/tasks/indexの画面す。

タスクをFormからSubmitすると下のリストに画面遷移なく追加されていく、というものです。

以下、作業ログ。

■ DB設定

こんな感じで。ちょーてきとー。

DROP TABLE IF EXISTS tasks;
CREATE TABLE tasks (
  id int(11) unsigned NOT NULL auto_increment,
  title varchar(255),
  created datetime NOT NULL,
  modified datetime NOT NULL,
  PRIMARY KEY (id),
  KEY created (created),
  KEY modified (modified)
);

あとモデルも適当につくっておいてください。

■ jQueryから

まずはJavaScriptを書いちゃうのがわかりやすいでしょう。いじるのは「views/tasks/index.ctp」です。なお、layoutの方でjQueryを読み込んでおくのを忘れずに。

面倒だから全部貼り付けてみる。

<h2>Tasks</h2>
<?php
echo $form->create('Task', array('default'=>false));
echo $form->input('title');
echo $form->submit('Add');
echo $form->end();
?>
<ul id="tasks">
<?php foreach($tasks as $task) { ?>
<li><?= h($task['Task']['title']); ?></li>
<?php } ?>
</ul>
<script language="JavaScript">
$(function() {
    $("#TaskAddForm").submit(function() {
      $.post('/tasks/ajax_add', {
        title: $("#TaskTitle").val()
      }, function(rs) {
        $("#tasks").prepend(rs);
        $("#TaskTitle").val('').focus();
      });
    });
});
</script>

注意する点は、formがsubmitされても画面遷移しちゃわないようにform作るときに”default”をfalseにすることぐらいすかね。

■ コントローラー

で、ajaxで呼び出されるajax_addも含め、コントローラーはこんな感じ。わかりやすいようにコメントつけといたよー。「controllers/tasks_controller.php」です。

class TasksController extends AppController {
  var $name = 'Tasks';
  // ajax呼び出しに必要
  var $components = array('RequestHandler');
  // とりあえずタスクの一覧表示
  function index() {
    $this->set('tasks', $this->Task->findAll());
  }
  // ajaxで呼び出される関数
  function ajax_add() {
    // デバッグ情報出力を抑制
    Configure::write('debug', 0);
    // ajax用のレイアウトを使用
    $this->layout = "ajax";
    // ajaxによる呼び出し？
    if($this->RequestHandler->isAjax()) {
      // POST情報は$this->params['form']で取得
      $title = $this->params['form']['title'];
      // DBに突っ込みます
      $this->Task->id = null;
      $this->data['Task']['title'] = $title;
      $this->Task->save($this->data);
      // 表示用のデータをviewに渡す
      $this->set('t', $title);
    }
  }
}

何点か。

• RequestHandlerのComponent呼び出しはajax通信かどうかの判定に必要。他のコントローラーでも使いたかったらapp_controller.phpでやっちゃってもいいです。
• 開発中はデバッグ情報出している人も多いと思うので「Configure::write(’debug’, 0);」としておくと吉。
• ajaxから$.postで渡される変数は$this->params['form']で取得でアクセス可能です。

■ ビュー関連

ビューは「views/tasks/ajax_add.ctp」と「views/layout/ajax.ctp」、それから先ほどJavaScriptを書いた「views/tasks/index.ctp」ですな。

まずはajaxのlayout。出力以外何もいらないので一行ね。

<?php echo $content_for_layout ?>

次にajax_add.ctp。今回要素をliで追加していくのでこんな感じ。コントローラーから渡された「t」を表示します。

<li><?php echo h($t); ?></li>

■ まとめ

ま、こんなところですかね。jQueryのコードから書いていくとまぁ、わかりやすいのでは。今回は一番典型的っぽい$.postを取り扱いましたが、他のAjaxも似たような感じでできるかと思います。ご参考までに。

なお、一番参考になったチュートリアルはこちらでした。あわせてどうぞ。

• JQuery in the CakePHP world (part 1 – the basics) « nuts and bolts of cakephp
• JQuery in the CakePHP world (part 2 – is client side code all that great?) « nuts and bolts of cakephp