固定の JSON データを、Wicket で作るサイトに用意して、JavaScript に渡すサンプルである。
バリデーションチェック後のメッセージを jQuery で処理するためにこの方法は使えるだろう。
以下のように、JSONデータがページクラスと同じ階層にあったとする。
------ userinfo.json ------
[
{ "name" : "Uran"
, "age" : 230
, "code" : "a10834"
}
,{ "name" : "Luke"
, "age" : 60
, "code" : "a20371"
}
,{ "name" : "King"
, "age" : 90
, "code" : "x70201"
}
]
---------------------------
このデータを返す WebPage
package org.uran.page.jsontest;
import java.io.File;
import java.net.URISyntaxException;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.request.handler.resource.ResourceStreamRequestHandler;
import org.apache.wicket.util.resource.FileResourceStream;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
/**
* UserInfoJson
*/
public class UserInfoJson extends WebPage{
public UserInfoJson(){
try{
File file = new File(getClass().getResource("userinfo.json").toURI());
getRequestCycle().scheduleRequestHandlerAfterCurrent(
new ResourceStreamRequestHandler(new FileResourceStream(file))
);
}catch(URISyntaxException e){
Logger logger = LoggerFactory.getLogger(this.getClass());
logger.warn(e.getMessage(), e);
}
}
}
サンプルページのHTML は、以下の様に用意
<wicket:extend>
<select id="ix">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<table>
<tr><td>key = name</td><td><button id="name">view</button></td></tr>
<tr><td>key = age </td><td><button id="age">view</button></td></tr>
<tr><td>key = code</td><td><button id="code">view</button></td></tr>
</table>
<div id="info"></div>
</wicket:extend>
サンプルの Webページクラスでは、renderHead をoverride して、jquery-2.0.3.min.js と、以下の JavaScript を
ヘッダで読込むように定義する。
UserInfoJson を package の完全パスで指定した URL を指定することで UserInfoJson で書かれたとおり
JSONデータをサーバから HTTP-GET で取得するようにする。
(以下、debug文、console.log も書いてある)
$(function(){
var userinfo = {};
$.getJSON("org.uran.page.jsontest.UserInfoJson", function(d){
userinfo = d;
}).done(function(){
console.log("-- done --"); // for debug
$.map(this, function(value, key){
console.log("key="+key+" value="+value);
});
console.log("----------");
}).fail(function(){
console.log("-- fail --");
console.log("url = "+ this.url );
}).always(function(){
console.log("-- always --");
});
$('#name').click(function(){
$('#info').html( userinfo[$('#ix').val()].name );
});
$('#age').click(function(){
$('#info').html( userinfo[$('#ix').val()].age );
});
$('#code').click(function(){
$('#info').html( userinfo[$('#ix').val()].code );
});
});
これで、<select> で選択したインデックスの name, ade , code を、参照することになる。