[CakePHP]コントローラ（アクション）から渡された配列をjQuery.Ajaxで利用する

表題が適切ではないかもしれません。

Ajaxアクセス先のコントローラアクションから渡した配列を、呼び出し元のページのjQueryのコード内で利用する方法です。*1

AjaxにはjQueryを、CakePHPではJsヘルパーを利用します。
もしかしたら私の書き方は変わっているかもしれませんので、参考程度に読んでいただけたら助かります。

本題

文字で説明するよりソースコードの方が分かりやすいかもしれません。

call.ctpからAjaxでexecアクションを呼んでデータベースの情報を取得。取得した情報をAjax呼び出し元のcall.ctpのjavascriptソース内で使用するイメージです。

コントローラ

// 略
var $helpers = array('Html', 'Form', 'Js');

/**
* 呼び出し元のアクション
**/
function call() {
	// なにも処理しない
}

/**
* Ajaxで呼び出すアクション
**/
function exec() {
	// Ajaxのための記述
	$this->layout = 'ajax';	// RequestHandlerコンポーネントを利用しているときは、勝手にやってくれるのでこの記述は不要。
	
	$this->loadModel('Item');	// Itemモデルから1件商品情報を取得してcall.ctpのjsで利用することにしましょう。
	$item = $this->Item->find('first');
	$this->set('item', $item);	// 私はいつも$this->set(compact('item'));って書くけど。
}
// 略

call.ctp

このビューにexecアクションをAjaxで呼び出す記述を書きます。
ポイントはAjaxで取得した情報(json)をjQuery.parseJSON()してJavaScriptオブジェクトに変換するところです。

<?PHP echo $this->Html->scriptStart(); ?>
function execReprint() {
	$.ajax({
		url: '<?PHP echo $this->Html->url(array('action' => 'exec')); ?>',
		type: 'GET',
		success: function(item){
			var item= $.parseJSON(item);
			$("#item_id").text(item.id);
			$("#item_name").text(item.name);
			$("#item_price").text(item.price);
		}
	});
}
<?PHP echo $this->Html->scriptEnd(); ?>
<?PHP echo $this->Form->button('EXECを呼び出す'); ?>
<p class="manual">↓以下のPに取得した値を書き込む</p>
<p id="item_id">?</p>
<p id="item_name">?</p>
<p id="item_price">?</p>

exec.ctp

Ajaxで呼び出すページのビューです。
ポイントはcallに渡したい配列を$this->Js->object($item)でjson形式のテキストに変換するところです。
このjsonをcall.ctpでjavascriptオブジェクトに戻して利用しています。

<?PHP
	// $itemを整形
	$result = array(
		'id' => $item['Item']['id'],
		'name' => $item['Item']['name'],
		'price' => "&yen;".number_format($item['Item']['price']),
	);
	// もちろん整形の必要がなければ取得した配列をそのままJs->objectしてもOKです。
	echo $this->Js->object($result);
?>

こんな感じ。

こんな記事でお役に立てるでしょうか？心配です。

1. 説明が下手くそでごめんなさい。わかりますか？ [↩]