読者です 読者をやめる 読者になる 読者になる

HOW TO GO

〜昨日の今日とは一味二味違うBlog〜

Struts2でレスポンスをjsonにする方法

Struts2でレスポンスをJSONにする方法についての設定メモです。

プラグイン追加

struts2-json-plugin-2.3.4.jarを使った。
pom.xmlにdependencyを追加

<dependency>
	<groupId>org.apache.struts</groupId>
	<artifactId>struts2-json-plugin</artifactId>
	<version>2.3.4</version>
</dependency>

struts.xmlの記述

  • jsonを使用するため、「struts-default」→「json-default」に変更
<package name="sample_app" namespace="/"  extends="json-default">
  • result-typeの定義
<result-types>
	<result-type name="json" class="org.apache.struts2.json.JSONResult"/>
</result-types>
  • アクションの記述

type="json"とし、testDataEntityと記述することで、
SampleActionクラスのメンバーtestDataEntityがjson形式でクライアントへ返却される。

<!-- 検索ActionのSample -->
<action name="selectSample2" class="sugiim.struts2sample.action.SampleAction">
	<result name="success" type="json">
		<param name="root">testDataEntity</param>
	</result>
</action>

クライアント(JavaScript)での書き方

jquery-1.8.1.js」使いました。

<script type="text/javascript">
<!--
$(document).ready(function() {

	// 検索ボタン(#search)押下
	$('#search').click(function() {
	
		// 検索結果の領域を消し、loadingの画像を表示する
		$("#disp_out").hide();
		$("#loading").show();

		
		// $.postを使ってajaxでサーバーにリクエスト
		$.post(
			$('#selectSample2').attr('action'),  // リクエストするアクション(name="selectSample2"のformのactionの値:selectSample2)
			// postで送るデータ('name': valueで記述する)
			{
				'struts.token.name': $('#selectSample2 [name=struts\\.token\\.name]').val(), 
				'struts.token': $('#selectSample2 [name=struts\\.token]').val(),
				'testDataInputEntity.person_id': $('#selectSample2_testDataInputEntity_person_id').val(),
				'method:selectData2': $('#search').val()

			},
			// responseの取得(testDataEntityがjson形式で)
			function(testDataEntity, textStatus ) {
			
				// loadingの画像をfadeOutし、検索結果の領域を表示する
				$("#loading").fadeOut(function() {
					$("#disp_out").show();
				});
				
				// 検索結果(testDataEntity)の各要素を画面にレンダリング
				$('#disp_person_id').text(testDataEntity.person_id);
				$('#disp_name').text(testDataEntity.name);
				$('#disp_age').text(testDataEntity.age);
				$('#disp_upate_date').text(testDataEntity.update_date);
			},
			'json' // postに対するresponseの形式を指定
		);
		// 検索ボタン(#search)押下のsubmitがきかないようにfalseで返却
		return false;
	});
});

// -->
</script>