"jQuery & T2"でAjax

スズキです。

GAE/J系、いろいろやっていましたが、
そろそろ、フォームからの入力処理をかためておきたいところです。

フォームからの入力処理は、基本的に非同期通信(Ajax)で行おうと思っています。
そうなると経験的にJavascript側は、
jQuery( Form & Validation Plugin)の選択になります。
http://blog.suz-lab.com/2008/11/jquery-validate-jquery-form.html

コードは下記のような感じです。

簡単なURLを入力して登録するフォームです。
必須かつURLの形式になってないとエラーになります。
通信先は"/mypage/index.json/insert"としています。
--------【Velocity】--------
#set($layout="other/layout.html")
<script type="text/javascript" src="/other/js/ext/form.js"></script>
<script type="text/javascript" src="/other/js/ext/validate.js"></script>
<script type="text/javascript" src="/other/js/app/mypage/index.js"></script>
<h2>マイページ</h2>
<a href="$user.createLogoutURL("/index.html")">ログアウト</a>
<form id="form" method="post" action="/mypage/index.json/insert">
　　<input type="text" name="url" class="required url" size="100"/><br />
　　<input type="submit" value="登録"/><br />
</form>
--------
http://code.google.com/p/suz-lab-gae/source/browse/trunk/suz-lab-feed/war/WEB-INF/vm/page/other/mypage/index.html?r=70

上記のフォームにValidationプラグインとFormプラグインを適用させています。
帰ってくるデータはJSONを前提にし、成功したらalertで送信したURLが表示されます。
--------【Javascript】--------
$(function() {
　　$("#form").validate({
　　　　submitHandler: function(form) {
　　　　　　$(form).ajaxSubmit({
　　　　　　　　dataType: "json",
　　　　　　　　success: function(json) {
　　　　　　　　　　alert(json.url);
　　　　　　　　}
　　　　　　});
　　　　}
　　});
});
--------
http://code.google.com/p/suz-lab-gae/source/browse/trunk/suz-lab-feed/war/other/js/app/mypage/index.js?r=70

"/mypage/index.json/insert"に非同期通信かつPOSTでアクセスされたら、
引数(url)にPOSTで送られたパラメータ(url)の値が入った形でinsertメソッドが実行されます。
結果はJSONで出力するようにしています。
--------【Java】--------
@Page("/other/mypage/index.json")
public class IndexJson {
　　@Ajax
　　@POST
　　@ActionPath
　　public Navigation insert(
　　　　@RequestParam("url") String url
　　) {
　　　　Map<String, String> map = new HashMap<String, String>();
　　　　map.put("url", url);
　　　　return Json.convert(map);
　　}
}
--------
http://code.google.com/p/suz-lab-gae/source/browse/trunk/suz-lab-feed/src/suz/lab/feed/page/other/mypage/IndexJson.java?r=70

T2のアノテーションはいろいろと用意されているので、適材適所で使えるように、
下記を熟読しなければ…
▼T2機能
http://sites.google.com/site/t2tips/Home/t2-userguide/3-1-t2kinou
▼アノテーション
http://code.google.com/p/t-2/wiki/Annotation
▼T2 ユーザガイド
http://t-2.googlecode.com/files/T2_UserGuice_Japanese%28ver0.5%29.pdf

【残タスク】
- Pageクラスのネーミングルール
- Pageクラスでのバリデーション
- API用のJSONフォーマット
- cron/task処理結果ページのテンプレート
- Page関係の抽象クラス再考

--------
http://www.suz-lab.com