Teeda Ajax

Teeda Ajaxはほんと簡単！
皆さん使いましょう。

さて内容ですが
Teeda（Seaser2.4）を使っている人はすでにSmartDeployですでにセットアップされている
と思います。

TeedaAjaxを使うためにはまず
１．必要コンポーネント　
ajax.js teeda-ajax-1.0.xxxxx.jar

２．HTMLの書き方
　　○下記をインクルード　（Pathはそれぞれに設定してください）
<script type="text/javaScript" src="../js/ajax.js" />
　　
　　○SelectBoxの準備
<select id="prefCd" onchange="getCity(this.value);">
<option value="" selected="selected">全て</option>
<option value="1">北海道</option>
・
・
</select>

　　○あとはJavascript関数定義
usersearch_indexPage_ajaxCity
パッケージ名 + "_" + TeedaPage名 + "_" + ajax関数名
で関数を作る

サンプル（都道府県から市区町村をとる仕組み）
<script type="text/javascript">
function usersearch_indexPage_ajaxCity(res){
//document.indexForm.cityCdはSelectBoxの値
createCityOptions(res, document.indexForm.cityCd);
}
function getCity(prefCd){
// 引数 prefCd 都道府県コード
　Kumu.Ajax.executeTeedaAjax(usersearch_indexPage_ajaxCity, [prefCd], Kumu.Ajax.RESPONSE_TYPE_JSON);
}
</script>

３．Pageの準備
　　ここので注意点としてSmartDeployは関数名をajaxと頭につける
　　「ajax+関数名」

package jp.co.iret.ceo.web.usersearch;

public class IndexPage{
public String ajaxCity(String prefCd){
// KuinaDaoでデータを取得
List<Map> list = usersearchLogic.findCityList(prefCd);
// JSONに変換　これ便利(中身の確認はデバックモードでみればすぐわかる)
return JSONSerializer.serialize(list);
}
}

４．受け取り側のJavaScript
こんな感じでJSONで受取り、Select値に当てはめていく
function createCityOptions(json,opt){
var dataCnt = json.length;
for (var i = 0; i < json.length; i++) {
var detail = json[i];
opt.options[i] = new Option(detail.label, detail.value);
}
}

関連記事