我们只有两个页面，"index.jsp"和"list.jsp"。"list.jsp"返回数据库中所有person的列表。我们把这个列表放到一个不同的页面上，是因为我们将要添加一点ajax来改进它。
- 在/WebContent/pages目录下创建一个名为"list.jsp" 的新文件，它的内容如下：
<%@ taglib prefix="s" uri="/struts-tags"%> <p>Persons</p> <s:if test="persons.size > 0"> <table> <s:iterator value="persons"> <tr id="row_<s:property value="id"/>"> <td> <s:property value="firstName" /> </td> <td> <s:property value="lastName" /> </td> <td> <s:url id="removeUrl" action="remove"> <s:param name="id" value="id" /> </s:url> <s:a href="%{removeUrl}" theme="ajax" targets="persons">Remove</s:a> <s:a id="a_%{id}" theme="ajax" notifyTopics="/edit">Edit</s:a> </td> </tr> </s:iterator> </table> </s:if>
当编辑链接被点击时，它会打开/edit主题，这将触发一个javascript函数来组装各个域。
- 在/WebContent目录下创建一个新文件"index.jsp"，它的内容如下：
<%@ taglib prefix="s" uri="/struts-tags"%> <html> <head> <s:head theme="ajax" debug="true"/> <script type="text/javascript"> dojo.event.topic.subscribe("/save", function(data, type, request) { if(type == "load") { dojo.byId("id").value = ""; dojo.byId("firstName").value = ""; dojo.byId("lastName").value = ""; } }); dojo.event.topic.subscribe("/edit", function(data, type, request) { if(type == "before") { var id = data.split("_")[1]; var tr = dojo.byId("row_"+id); var tds = tr.getElementsByTagName("td"); dojo.byId("id").value = id; dojo.byId("firstName").value = dojo.string.trim(dojo.dom.textContent(tds[0])); dojo.byId("lastName").value = dojo.string.trim(dojo.dom.textContent(tds[1])); } }); </script> </head> <body> <s:url action="list" id="descrsUrl"/> <div style="width: 300px;border-style: solid"> <div style="text-align: right;"> <s:a theme="ajax" notifyTopics="/refresh">Refresh</s:a> </div> <s:div id="persons" theme="ajax" href="%{descrsUrl}" loadingText="Loading..." listenTopics="/refresh"/> </div> <br/> <div style="width: 300px;border-style: solid"> <p>Person Data</p> <s:form action="save" validate="true"> <s:textfield id="id" name="person.id" cssStyle="display:none"/> <s:textfield id="firstName" label="First Name" name="person.firstName"/> <s:textfield id="lastName" label="Last Name" name="person.lastName"/> <s:submit theme="ajax" targets="persons" notifyTopics="/save"/> </s:form> </div> </body> </html>
看，并没有页面刷新！
"personx" div会异步地装载它的内容，当请求被处理时显示"Loading..."提示（你可以使用"indicator"属性得到更佳的进度反馈），你可以通过点击"Refresh"链接来强制页面进行刷新。"submit"按钮，向action "save"提交一个异步的请求（PersonAction的"save"方法）
Validation验证
我们并不想我们的数据库存在任何的无名氏，所以我们给Form增加一点基本的客户端验证。在Struts2中，验证可以被放在xml文件里，命名模式为：ActionName-validation.xml，放在与action相同的包路径下。要给action的特定别名添加验证（比如方法），validation文件的命名必须为：ActionName-alias-validation.xml，这里的"alias"就是你的action的别名（这里也就是方法名，如"save"）。在src/quickstart/action目录下添加一个名为"PersonAction-save-validation.xml"文件，它的内容如下：
<!DOCTYPE validators PUBLIC "-//OpenSymphony Group//XWork Validator 1.0.2//EN" "http://www.opensymphony.com/xwork/xwork-validator-1.0.2.dtd"> <validators> <field name="person.firstName"> <field-validator type="requiredstring"> <message>First name is required!</message> </field-validator> </field> <field name="person.lastName"> <field-validator type="requiredstring"> <message>Last name is required!</message> </field-validator> </field> </validators>
关于现有的validator，以及如何编写和插入你自己的validator，请查看Struts文档
要运行项目，右击你的项目并选择Run AS -> Run on Server。你也可以通过相同的办法来调试它，右击项目 Debug As -> Debug on Server。下载并安装Struts 2的 showcase演示项目来查看更多的例子。
