CakePHPによるAjax転送

CakePHP2 で Jsヘルパーを使用して、Ajax転送を行う次のソフトを作成しました。

webブラウザよりURL「http://localhost/kanas/ajax_request」を入力すると、次の画面が表示されます。Title欄に設定した文字列を、「Add Title」ボタンを押すと「updating…」の下に表示します。「updating…」は、「Add Title」ボタンを押すと消され、Ajax転送が成功すると再表示されます。

開発環境

• cakephp-2.5.2
• jQuery-2.1.1

Controller

app\Controller\KanasController.php

<?php
class KanasController extends AppController {

   public $helpers = array('Js' => array('Jquery'));
 	// リクエストを送る側のページ
	public function ajax_request() {
	}
	
 	// リクエストを受け取るページ
	public function ajax_event_return() {
        if ($this->Kana->save($this->data)) {
		}
               // 画面に何も表示されない
		$this->autoLayout = false;
               // View/Layouts にあるレイアウトを使用しない
		$this->autoRender = false;
		echo $this->data['Kana']['title'] ;
	}
}

Title欄の文字列の取得方法

ajax_request.ctpで示す「$this->Form->input(‘title’)」でTitle欄の文字列が設定されます。フォームからのデータは、Ajax転送すると、CakePHPが自動的に変数$data[‘テーブル名’][‘フィールド名’]に格納してくれます。Controllerでは「this->Kana->save()」を用いて、フォームからのデータ$dataをデータベースのテーブル「kanas 」に保存しています。

Model

app\Model\Kana.php

<?php
class Kana extends AppModel {
}
?>

MySQLのテーブル「kanas」の生成用のSQLを次に示します。

DROP TABLE IF EXISTS kanas;
CREATE TABLE kanas (
  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)
);

View

app\View\Kanas\ajax_request.ctp

<?php
echo $this->Form->create( 'Kana', array( 'type'=>'post'));
echo $this->Form->input('title');
echo $this->Js->submit('Post Your Message', array(
	'before'  => $this->Js->get( '#sending-js-submit')->effect( 'hide'),
	'success' => $this->Js->get( '#sending-js-submit')->effect( 'show'), 
    'url' => array(
        'action' => 'ajax_event_return'
    ),
	'update' => '#result-js-submit'
));
echo $this->Form->end();

echo $this->Js->writeBuffer();
?>

<div id="sending-js-submit">updaing...</div>
<div id="result-js-submit"></div>    <script>

コールバックに関する属性項目として次のようなものがあります。

before

AJAXリクエストが送信される前に呼び出されます。必要であれば、XMLHttpRequestオブジェクトを操作して追加のheaderを付与してやるなどの処理が行えます。

success

通信が成功した際に呼び出されます。サーバエラーやデータエラーが発生した場合には呼ばれません。

url

Ajax処理で呼び出すURL(controller/action)

update

ajax更新の結果を出力する要素

Js HelperによりｊQueryを作成しますが、「$this->Js->writeBuffer()」でJs Helperで作られたすべてのスクリプトが出力され、Ajaxで送信されたデータがブラウザに表示される。

app\View\Layouts\default.ctp

webroot\kana\jsにjQuery-2.1.1を保存します。jQueryの呼び出しは、デフォルトテンプレートのヘッダに記述しました。

echo $this->Html->script('jquery-2.1.1.min.js');

CakePHPのログ取得

Object クラスのメソッドとして、log() が用意されているため、コントローラ、モデル、ビュー、ヘルパーなど Object クラスを継承しているクラスで、次のように使用できます。第一引数が配列の場合は、print_r() の出力形式と同じように出力されます。

使用方法

$this->log(‘エラー’)
　ログの出力先:/app/tmp/logs/error.log

$this->log(‘デバッグ’, LOG_DEBUG)
　ログの出力先:/app/tmp/logs/debug.log