|
JavaのWebアプリケーション開発フレームワークによる、Webサイト開発の顛末記です。 EclipseのMavenを使った、Spring-MVC、Thymeleaf、MyBatis 等のプログラミングテクニックを、 備忘録的に記録しています。実際に動くソースコードを多用して説明していますので、 これからEclipseや、Spring-MVCを始めたいと思っている人にとって、少しでも参考になれば幸いです。 |
|
Spring-MVCの散歩道 > 応用の森(JSON編) > JSONデータ構造から動的クラス生成
|
<!DOCTYPE html>
<!-- xmlnsは、Thymeleafのおまじないです -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Spring-MVC 動的クラス生成サンプル</title>
<meta charset="UTF-8" />
<!--[if lt IE 9]>
<script type="text/javascript" src="./js/jquery-1.11.2.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="./js/jquery-2.2.3.js"></script>
<!--<![endif]-->
<script type="text/javascript">
<!--
$(function(){
//「検索」ボタンクリック時
$("#btn_submit").click(function(){
//画面上のパラメータ(地域コード)を取得
var areacd = $('#areacd').val();
//パラメータをJSONオブジェクト化する
var reqparam = {
"areacd" : areacd
};
var param = JSON.stringify(reqparam);
//Ajaxを実行する(Over 1.8系)
$.ajax({
url : "./searchzip.xhtml", //実行するサーブレット
dataType: "html", //サーバから返却されるデータの型(html)
type : "post", //post, get
data : param, //JSON形式
}).done(function(resData) { //callback data:response
//返却値(zipPref.htmlが返る)をviewに描画する
$("#resPref").html(resData);
}).fail(function(resData) {
console.log("faild resData["+JSON.stringify(resData,null,' ')+"]");
});
});
});
//-->
</script>
</head>
<body>
<form>
<table>
<tr>
<td>
JSONデータから、動的Classを生成して、viewに表示するサンプル
</td>
</tr>
<tr>
<td>
地域コードを選択してください。
<select id="areacd">
<option value="01">北海道</option>
<option value="02">東 北</option>
<option value="03">関東・甲信越</option>
<option value="04">東 京</option>
<option value="05">中部・北陸</option>
<option value="06">関 西</option>
<option value="07">中国・四国</option>
<option value="08">九州・沖縄</option>
</select>
</td>
</tr>
<tr>
<td>
<input id="btn_submit" type="button" value="検索" />
</td>
</tr>
</table>
</form>
<!-- 検索結果 都道府県情報描画領域 -->
<div id="resPref"></div>
</body>
</html>
|