トップ  > JavaScript  > jQuery  > 記事

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


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


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

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

こちらもあわせてどうぞ



引用元

更新:2010/04/11 10:16 カテゴリ: JavaScript  > jQuery ▲トップ

Python

フロントエンド開発

Docker

AWS

nginx

Node.JS

Linux

web開発

サーバ管理

GCP

svn・git

ソース・開発

プロマネ

HTML・CSS

JavaScript

Alexa

webサービス運用

webサービス

Mac

MySQL

PHP

FuelPHP

ツール, ライブラリ

ビジネス

テンプレート

プレゼン

マネタイズ

負荷・チューニング

Windows

メール

メール・手紙文例

CodeIgniter

オブジェクト指向

UI・フロントエンド

cloud

マークアップ・テキスト

Flash

デザイン

DBその他

Ruby

PostgreSQL

ユーティリティ・ソフト

Firefox

ハードウェア

Google

symfony

OpenPNE全般

OpenPNE2

Hack(賢コツ)

OpenPNE3

リンク

個人開発

その他

未確認

KVS

ubuntu

Android

負荷試験

オープンソース

社会

便利ツール

マネー

Twig

食品宅配

WEB設計

オーディオ

一般常識

アプリ開発

サイトマップ

うずら技術ブログ

たませんSNS

rss2.0