UP
Validateの例
前のページへ
SAStruts
次のページへ
Mayaaとのドッキング


Ajaxと組み合わせる


SAStrutsでのAjaxを使った簡単なサンプルは「Super Agile Strutsチュートリアル」(sa-struts-tutorial/src/main/java/tutorial/action/AjaxAction.java)にある。

seaserの「機能リファレンス」にも説明が載っている。

 

ここではこの例をもう少し発展させて、SAStrutsのJSPページのHTML出力をJavaScriptよりAjaxで取得して、画面遷移をする事無しに入力ページの一部に表示する例を紹介する。
また、入力データに誤りがある場合はSAStrutsの検証の機能を使って、エラーメッセージも一緒にAjaxで取得する事にする。

ここで面白いのはSAStrutsのActionやFormの仕組みをそのまま利用してJSPカスタムタグの出力をJavaScriptで取得して表示できる事である。

入力ページの修正

AjaxのライブラリjQueryを使うために、「Super Agile Strutsチュートリアル」のプロジェクトより「sa-struts-tutorial/src/main/webapp/js」フォルダを、フォルダごと「SAStrutsApp/src/main/webapp」フォルダにコピーします。

src/main/webapp/WEB-INF/viewの直下にexsample4フォルダを作成して、Validateの例で作成したsrc/main/webapp/WEB-INF/view/exsample3/index.jspを、コピーし,以下のように修正します。

<%@page pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>exsample4入力フォーム</title>
<script type="text/javascript" src="${f:url('/js/jquery.js')}"></script>
<script type="text/javascript">
	function doAjax(){
		var params={};
		params["name"]=$("#name").val();
		params["departmentName"]=$("#departmentName").val();
		params["salary"]=$("#salary").val();
		$('#message').load('${f:url('result')}', params);
	}
</script>
</head>
<body>
<h1>exsample4入力フォーム</h1>
Ajaxの例
<hr />
<html:errors />
<s:form>
	<table>
		<tr>
			<td><bean:message key="labels.name" /></td>
			<td><html:text property="name" styleId="name" /></td>
		</tr>
		<tr>
			<td><bean:message key="labels.departmentName" /></td>
			<td><html:select property="departmentName" styleId="departmentName">
				<html:option value="営業">営業</html:option>
				<html:option value="開発">開発</html:option>
				<html:option value="製造">製造</html:option>
			</html:select></td>
		</tr>
		<tr>
			<td><bean:message key="labels.salary" /></td>
			<td><html:text property="salary" styleId="salary" /></td>
		</tr>
	</table>
	<input type="button" value="Ajax通信" onclick="doAjax();"/>
</s:form>
<div id="message" style="border:1px solid">出力結果</div>
</body>
</html>

TITLEタグの下に、Ajaxを使うためのJavaScriptを追加しています。
フォームに入力されたデータをJavaScriptよりID属性で取得できるように、StrutsのhtmlタグにstyleId属性を追加しています。
styleId属性はHTMLタグに変換されると、INPUTタグのID属性となります。
ボタンのINPUTタグも、JavaScriptのメソッドを呼び出すように変更。
Ajaxより取得したデータを出力するために、DIVタグを追加します。
入力ミスがあった場合にStrutsで生成したエラーメッセージを表示する、<html:errors />タグは結果出力ページで表示するため削除します。

フォームのボタンが押されると、JavaScriptのdoAjax関数でフォームのパラメータを連想配列に詰め込んで、resultページに引数として渡します。
このレスポンスとしてSAStrusで生成したJSPページが取得され、idがmessageのDIVタグに結果データとして表示されます。
 

Actionの修正

mySAStruts.action.Exsample3ActionクラスをExsample4Actionクラスにコピーして、20行目を修正。
「input=」でエラー時に出力されるJSPページの指定を、index.jspからrsult.jspに変更しています。
その結果、検証エラーの場合もrsult.jspへ処理が移る事になります。
ActionFormはExsample3Formクラスをそのまま使用しています。

package mySAStruts.action;ion;

import javax.annotation.Resource;
import org.seasar.struts.annotation.ActionForm;
import org.seasar.struts.annotation.Execute;

import mySAStruts.form.Exsample3Form;

public class Exsample4Action {

	@ActionForm
	@Resource
	protected Exsample3Form exsample3Form;

	@Execute(validator = false)
	public String index() {
		return "index.jsp";
	}

	@Execute(validate = "validate", input = "result.jsp")
	public String result() {
		return "result.jsp";
	}
}

結果出力ページの修正

入力ページと同様にsrc/main/webapp/WEB-INF/view/exsample4フォルダに、Validateの例で作成した結果出力ページsrc/main/webapp/WEB-INF/view/exsample3/result.jspを、コピーし,以下のように修正します。

結果出力ページはAjaxで取得され、入力ページの一部としてindex.jspで追加したdivタグに表示されるので、table以外の部分は削除する。
また、ActionFormでの検証結果もAjaxで取得して表示させるため、<html:errors />タグを追加する。

<%@page pageEncoding="UTF-8"%>
<html:errors />
<table border="1">
	<tr>
		<td><bean:message key="labels.name" /></td>
		<td>${f:h(name)}</td>
	</tr>
	<tr>
		<td><bean:message key="labels.departmentName" /></td>
		<td>${f:h(departmentName)}</td>
	</tr>
	<tr>
		<td><bean:message key="labels.salary" /></td>
		<td>${f:h(salary)}</td>
	</tr>
</table>

動作確認

tomcatを起動し入力画面を表示。
入力フォームにデータを入力してAjax通信ボタンを押す。

SAStruts_Ajax1 

 

「出力結果」と表示されていたdivタグの部分の表示が、result.jspで記述したテーブルデータに変更されるのがわかる。
また、ちゃんと検証メソッドのエラーメッセージも表示されている。

SAStruts_Ajax2 

参考URL

jQueryについては以下のURLが参考なる。

 

ページのトップへ戻る