Struts 2处理Dojo Ajax请求的一点经验

从Struts 1到Struts 2，从Dojo 1.5到Dojo 1.7、1.8，技术一直在进步，经验却需要时时更新。对于Web应用中最常碰到的Ajax请求处理，新版本的Struts 2和dojo 1.7做法就和以前不一样（在JAVA servlet中返回不同类型的AJAX response）。现在就拿一个例子说明如何从前台用Dojo通过Ajax请求将Json数据送回后台，后台检测后返回信息；顺便也看看到底新技术进步在哪里。

 

例子：前台录入人员信息,并保存到后台，后台返回保存后的id。

 

1. 在主页上增加一个按钮，点击时打开填写人员信息的对话框

main.jsp

<div style="width: 100%;">
		<button id="new_person_btn" data-dojo-type="dijit.form.Button"
			type="button">New Person</button>
	</div>
<div class="dijitHidden">
		<div data-dojo-type="test.person" style="width: 400px;"
			id="new_person_dlg"></div>
	</div>
<script>
		require([ "dojo/ready", "dojo/on", "dijit/registry"],
				function(ready, on, registry) {
					ready(function() {

						var new_person_btn = registry.byId("new_person_btn");
						on(new_person_btn, "click", function(evt) {
							registry.byId("new_person_dlg").show();
						});

					});

				});
	</script>

2. 对话框页面，可以填写人员姓名、描述、是否正式员工

person.jsp

<div data-dojo-type="dijit.form.Form" id="new_person_form"
	data-dojo-id="new_person_form" encType="multipart/form-data">
	<table cellspacing="10" style="width: 100%">
		<tr>
			<td><label for="name">Name:</label></td>
			<td><input type="text" id="new_person_name" name="name"
				style="width: 100%" required="true"
				data-dojo-type="dijit.form.ValidationTextBox" /></td>
		</tr>
		<tr>
			<td><label for="description">Description:</label></td>
			<td><textarea id="new_person_description" name="description"
					data-dojo-type="dijit.form.SimpleTextarea" rows="4"
					style="width: 99%"></textarea></td>
		</tr>
		<tr>
			<td><label for="regular">Regular:</label></td>
			<td>
				<div data-dojo-type="dojo.store.Memory" data-dojo-id="new_person_regular_store"
					data-dojo-props="data: [{id: 'y', name: 'yes'}, {id: 'n', name: 'no'}]"></div>
				<input data-dojo-type="dijit.form.ComboBox" value="yes" style="width: 100%" 
				data-dojo-props="store:new_person_regular_store, searchAttr:'name'" name="regular"
				id="new_person_regular" />
			</td>
		</tr>
	</table>
	<div style="text-align: right; margin-right: 6px;">
		<button id="new_person_submit_btn" data-dojo-type="dijit.form.Button">OK</button>
		<button id="new_person_cancel_btn" data-dojo-type="dijit.form.Button">Cancel</button>
	</div>
</div>

3. 对话框对应的JavaScript对象，里面包含了所有对话框相关的JS代码和事件处理。这些代码也可以放在person.jsp中，但鉴于分离视图和控制逻辑有诸多好处（MVC框架中的模型-视图分离问题（一） —— “你必将业务逻辑由显示中分离”），这儿还是分开吧。

person.js

define([ "dojo/_base/declare", "dijit/Dialog", "dijit/_WidgetBase",
		"dijit/_TemplatedMixin", "dojo/on", "dijit/registry", "dojo/_base/xhr",
		"dijit/form/Form", "dijit/form/ValidationTextBox",
		"dijit/form/SimpleTextarea", "dojo/store/Memory", "dijit/form/ComboBox"], function(declare, Dialog, _WidgetBase,
		_TemplatedMixin, on, registry, xhr) {
	return declare("test.person",
			[ Dialog, _WidgetBase, _TemplatedMixin ], {
				title : "New Person",

				postCreate : function() {
					this.set('href', "dialog_newperson.action");

					this.inherited(arguments);
				},

				onDownloadEnd : function() {
					var new_person_form = registry.byId("new_person_form");
					var new_person_submit_btn = registry
							.byId("new_person_submit_btn");
					on(new_person_submit_btn, "click", function(evt) {
						if (!new_person_form.validate()) {
							return false;
						}

						/*为了让后台认识json格式的数据，这儿有几个地方需要注意的。*/
						
						var data = {
							person : dojo.formToObject("new_person_form")
						};
						// Post the data to the server
						xhr.post({
							url : "submit_newperson.action",
							handleAs : "json",
/*注意点1：json数据必须转成json格式*/
/*注意点2：json数据要放在postData中，而不是content中*/
							postData : dojo.toJson(data),
/*注意点3：设置contentType为application/json */
							contentType : 'application/json; charset=utf-8',
							handle : function(response, ioArgs) {
								return response;
							}
						});
					});

					var new_person_cancel_btn = registry
							.byId("new_person_cancel_btn");
					on(new_person_cancel_btn, "click", function(evt) {
						registry.byId("new_person_dlg").hide();
					});

					this.inherited(arguments);
				}
			});
});

4. 为了让Struts 2能认识json格式的数据，需要引入struts2-json-plugin包。这儿用Maven管理项目，就可以直接在pom文件中加入相应dependency。如果不用Maven，则直接将jar包加入到项目buildpath中。

pom.xml

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

5. 重点！struts.xml中需要进行相应配置

struts.xml

<!--注意点1：在package的extends里，必须有json-default -->
<package name="workbench" namespace="/"
		extends="struts-default,json-default">
		<action name="submit_newperson" class="test.SubmitNewPersonAction">
			<!--注意点2：在action里，加入json interceptor信息 -->
			<interceptor-ref name="json">
				<param name="contentType">application/json</param>
			</interceptor-ref>
			<!--注意点3：设置result为json格式 -->
			<result type="json">
				<!--注意点4：设置result包含的内容。这儿只包含result变量的数据，而没有person的数据 -->
				<param name="includeProperties">result</param>
			</result>
		</action>
	</package>

6. 保存人员信息的java对象

Person.java

public class Person {
	private String name;
    private String description;
    private String regular;
    
    public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getDescription() {
		return description;
	}

	public void setDescription(String description) {
		this.description = description;
	}

	public String getRegular() {
		return regular;
	}

	public void setRegular(String regular) {
		this.regular = regular;
	}
}

7. 相应的action。接收传入的人员数据，返回相应的id

TestAction.java

public class TestAction extends ActionSupport {

	private static final long serialVersionUID = 1L;

	private int result;
	 
    private Person person;
    
    public void setPerson(Person person) {
		this.person = person;
	}

	public Person getPerson() {
		return person;
	}

	@Override
	public String execute() {
		System.out.println(person);

		int result = savePerson(person);
		return SUCCESS;
	}

	public int getResult() {
		return result;
	}

}

8. 最后返回的Response:

{"result":1}

总结

相比较Struts 1而言，Struts 2在处理接收的数据方面，确实有很大的改进。数据传送到后台后，不需要手工写代码解析json格式的数据，只要schema一致，就可以用相应的POJO对象接收。