インソースマーケティングデザイン
2016.06.30 システム
[CakePHP]AJAXでJSON形式のデータを処理したい！（jQuery）
こんにちは。エンジニアの高田です。
昨日今年初のひまわりを見かけました。ひまわりっていいですよね。
夏がキター！って感じで、元気が出ます。
さて今日は、CakePHP2系において、おなじみのjQueryを使用してAJAX通信で、JSON形式のデータを受け取ってなんやかんや処理する方法について紹介します。
今まで弊社のCakePHPは2系の初期のバージョン、jQueryは1.x系を使用していました。
このたびCakePHP2系の最新バージョン、jQueryは2系をすることになり、AJAX通信の方法を見直してみたのがきっかけです。
目次
やりたいこと
リスト1の値を変更したら、リスト2の中身を変更したい！
こういうケースよくありますよね。例えば、都道府県リストで「栃木県」を選択したら、市町村リストには栃木県の市町村リストが設定されるみたいな感じ。
（例）
都道府県：
市町村：
※今回の処理が実装されているわけではありません。。。
やりたいことは分かっていただけましたでしょうか？
今回はこの都道府県から市町村リストを取得するのを例にして説明していきます。
開発環境
今回、使用した開発環境は以下の通り。
・開発言語 ：PHP 5.4.43
・フレームワーク ：CakePHP 2.8.0
・jQuery ：v2.2.0
CakePHPでJSON形式のデータを返す
＜コントローラー／ApiController＞
class ApiController extends AppController {
public $uses = array('City');
public function city_list() {
// ----------------------------------------
// 初期処理
// ----------------------------------------
// ビューの使用無を設定
$this->autoRender = false;
// ContentTypeをJSONにする
$this->response->type('json');
// Ajax以外の通信の場合
if(!$this->request->is('ajax')) {
throw new BadRequestException();
}
//-------------------------------------------
// リクエストパラメータ取得
//-------------------------------------------
// 都道府県コード
$prefCd = $this->request->query['cd'];
//-------------------------------------------
// 市町村リスト取得
//-------------------------------------------
$result = $this->City->findByPrefCd($prefCd);
//-------------------------------------------
// 戻り値の設定
//-------------------------------------------
$status = !empty($result);
if(!$status) {
throw new NotFoundException();
$error = array(
'message' => 'データがありません',
'code' => 404
);
}
// json_encodeを使用してJSON形式で返却
return json_encode(compact('status', 'result', 'error'));
}
}
ビュー側でJSON形式のデータを受け取る
＜ビュー／test.ctp＞
<?php echo $this->Html->script('/js/api', array('inline' => false)); ?>
<?php echo $this->Form->create('Contact'); ?>
都道府県：
<?php echo $this->Form->select('pref_list', array('栃木県', '東京都', ...)); ?>
市町村：
<?php echo $this->Form->select('city_list', array()); ?>
<?php echo $this->Form->end(); ?>
＜jQuery／api.js＞
$(function() {
// ------------------------------------
// 市町村リスト設定（都道府県変更時）
// ------------------------------------
$('#ContactPrefList').change(function() {
$.ajax({
type: 'get',
dataType: 'json',
async: false,
url: '/api/city_list/',
data: {
'cd' : $(this).val(),
},
}).done(function(data){
var list = null;
if(data.status) {
// 成功時
list = data.result;
// 市町村リストの生成
$('#ContactCityList > option').remove();
for (key in list) {
$("#ContactCityList").append($("<option>").val(key).text(list[key]));
}
} else {
// 失敗時
//alert(data.message);
}
}).fail(function(data){
// アクション側でExceptionが投げられた場合はここに来る。
// alert('error!!!');
});
});
});
あら意外と簡単！ではまた。
