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

SPONSORED LINK

Pocket

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

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

task

↑ こういうやつ。/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も似たような感じでできるかと思います。ご参考までに。

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

ツイッターもやっています!

SPONSORED LINK

    • RUF
    • November 13th, 2009

    いつも拝見させていただいております。本投稿も大変活用させていただいております。

    ところで記載されていますとおりに、自環境にて構築しましたところ、「Add」後に、画面がリロードされないと追加したレコードが見れないことが分かりました。「Add」後に自動で追加されたことが一覧で分かるようにするにはどうすればよいでしょうか。

    できましたらご教示いただければと思います。

    よろしくお願い致します。

  1. No trackbacks yet.