この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。
WEBフレームワークのTeedaで簡単にAjaxを実装する方法を実例とともにご紹介します。
【環境】
Teeda 1.0.13
Seasar 2.4
TeedaにはAjaxを実装するためのプラグイン「Kumu.Ajax」が用意されています。
使用するには以下のライブラリを設定おきます。
・teeda-ajax-1.0.13-xx.jar
・ajax.js
■ teeda-ajax-1.0.13-xx.jar 設定
WEB-INF/lib配下にteeda-ajax-1.0.13-xx.jarを含めます。
web.xmlも以下のように設定しておきます。
<servlet> <servlet-name>ajaxServlet</servlet-name> <servlet-class>org.seasar.teeda.ajax.AjaxServlet</servlet-class> <load-on-startup>3</load-on-startup> </servlet> <servlet-mapping> <servlet-name>ajaxServlet</servlet-name> <url-pattern>*.ajax</url-pattern> </servlet-mapping>
■ ajax.js 設定
ajax.jsを任意のディレクトリに配置します(src/main/webapp/js等)
もしajax.jsが無い場合はTeeda本体をダウンロードして取り出して下さい。
→「ダウンロード」より最新の「Teeda core(JSF実装)/extension(Htmlテンプレート等を含む拡張機能)/ajax(Ajax実現機能)を含む本体」をDL
※解凍後、src/main/resources/org/seaser/teeda/ajax/js内にあります。
HTML側でajax.jsを読み込みます。
<head> <script type="text/javaScript" src="../../js/ajax.js" /> </head>
■ HTML側(リクエスト処理)
これで準備は完了です。
では、選択した都道府県セレクトボックスに連動して、市区町村セレクトボックスを切り替える処理を実装してみたいと思います。
都道府県のセレクトボックスにonchangeを設定し、javascriptで定義したgetCityメソッドを呼び出します。
< select id="pref" onchange="getCity(this.value);">
< option value="0">dummy
< /select>
getCityではKumu.Ajax.executeTeedaAjaxを呼び出します。
第1引数：呼び出したいパッケージ + メソッド名を設定
第2引数：アプリ側に渡すパラメータ
第3引数：戻り値の型 ※TEXT以外にもJSONなども使えます
function getCity(prefId){
Kumu.Ajax.executeTeedaAjax(mypage_updateAccountAction_ajaxCity, [prefId], Kumu.Ajax.RESPONSE_TYPE_TEXT);
}
■ アプリ側
アプリ側では以下のように受けるメソッドを定義しておきます。
prefIdがパラメータとして渡ってくるので、その引数を元に市区町村を取得し、TEXT型で返します。
(mypage/updateAccountAction)
public String ajaxCity(String prefId){
Map<string , string> items = getCityItems(Long.valueOf(prefId));
String str = items.toString();
return StringUtils.strip(str, "{}");
}
■ HTML側(レスポンス処理)
コールバック関数にはリクエスト時の第1引数と同じ名前を付けておきます。
function mypage_updateAccountAction_ajaxCity(res){
createCityOptions(res);
}
あとはこれを展開して市区町村セレクトボックスのリストの内容を書き換えればOKです。
function createCityOptions(res){
var city = document.getElementById("city");
// セレクトボックスを初期化
removeChildren(city);
city.options[0] = new Option("選択してください", null);
if (res != "") {
// カンマで分割し配列に格納
var resArray = res.split(", ");
for (var i = 0; i < resArray.length; i++) {
var detailArray = resArray[i].split("=");
var name = detailArray[0];
var id = detailArray[1];
city.options[i+1] = new Option(name, id);
}
}
}
function removeChildren(x) {
if (x.hasChildNodes()) {
while (x.childNodes.length > 0) {
x.removeChild(x.firstChild)
}
}
}
以上です。わりと簡単にAjaxを実装できるKumu.Ajaxおすすめです！
connpass
Peatix
Wantedly
デザインチームnote