首先，我们先创建一个简单的用例，在这个用例中，将在屏幕上显示一个用户列表，点击列表中的userid时，列表的下方将显示用户的详细信息，显示用户详细信息的这个步骤我们将使用Ajax。
本次实例使用myeclipse8.5，并加载struts2和dojo(struts2-dojo-plugin-2.1.8.1.jar)支持。
一、修改web.xml
增加过滤器：
<filter-mapping> <filter-name>struts2</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>
二、修改struts.xml
增加如下包
<package name="ajaxdemo" extends="struts-default"> <action name="UserListingAction" class="ajaxdemo.action.UserListingAction"> <result>/userlisting.jsp</result> </action> <action name="UserDetailAction" class="ajaxdemo.action.UserDetailAction"> <result>/userdetail.jsp</result> </action> </package>
三、JSP页面：显示用户列表 userlisting.jsp
view plain copy to clipboard print ? <%@ taglib prefix="s" uri="/struts-tags"%> <%@ taglib prefix="sx" uri="/struts-dojo-tags"%> <html> <head> <title>It 's MyTest!</title> <sx:head /> </head> <mce:script type="text/javascript"><!-- function show_user_details(id) { document.frm_user.userid.value = id; dojo.event.topic.publish("show_detail"); } // --></mce:script> <body> hello! <s:form id="frm_user" name="frm_user"> <h1>User Listing</h1> <s:if test="userList.size > 0"> <table border="1"> <s:iterator value="userList"> <tr> <td> <s:a href="#" mce_href="#" οnclick="javascript:show_user_details('%{id}');return false;"><s:property value="id" /></s:a> </td> <td> <s:property value="name" /> </td> </tr> </s:iterator> </table> </s:if> <s:hidden name="userid"/> <s:url id="d_url" action="UserDetailAction" /> <sx:div id="user_details" href="%{d_url}" mce_href="%{d_url}" theme="ajax" listenTopics="show_detail" formId="frm_user" > </sx:div> </s:form> </body> </html>
<%@ taglib prefix="s" uri="/struts-tags"%> <%@ taglib prefix="sx" uri="/struts-dojo-tags"%> <html> <head> <title>It 's MyTest!</title> <sx:head /> </head> <mce:script type="text/javascript"><!-- function show_user_details(id) { document.frm_user.userid.value = id; dojo.event.topic.publish("show_detail"); } // --></mce:script> <body> hello! <s:form id="frm_user" name="frm_user"> <h1>User Listing</h1> <s:if test="userList.size > 0"> <table border="1"> <s:iterator value="userList"> <tr> <td> <s:a href="#" mce_href="#" οnclick="javascript:show_user_details('%{id}');return false;"><s:property value="id" /></s:a> </td> <td> <s:property value="name" /> </td> </tr> </s:iterator> </table> </s:if> <s:hidden name="userid"/> <s:url id="d_url" action="UserDetailAction" /> <sx:div id="user_details" href="%{d_url}" mce_href="%{d_url}" theme="ajax" listenTopics="show_detail" formId="frm_user" > </sx:div> </s:form> </body> </html>
四、页面：userdetail.jsp，用于显示用户详细信息，由userlisting.jsp加载
view plain copy to clipboard print ? <%@ taglib prefix="s" uri="/struts-tags" %> <h1>User Details</h1> <s:if test="userDetails != null"> <table> <tr><td>Id:</td><td><s:property value="userDetails.id" /></td></tr> <tr><td>Name:</td><td><s:property value="userDetails.name" /></td></tr> <tr><td>Email:</td><td><s:property value="userDetails.email" /></td></tr> <tr><td>Address:</td><td><s:property value="userDetails.address" /></td></tr> </table> </s:if>
<%@ taglib prefix="s" uri="/struts-tags" %> <h1>User Details</h1> <s:if test="userDetails != null"> <table> <tr><td>Id:</td><td><s:property value="userDetails.id" /></td></tr> <tr><td>Name:</td><td><s:property value="userDetails.name" /></td></tr> <tr><td>Email:</td><td><s:property value="userDetails.email" /></td></tr> <tr><td>Address:</td><td><s:property value="userDetails.address" /></td></tr> </table> </s:if>
五、ajaxdemo.action.UserListingAction.java，生成用户列表数据，交由userlisting.jsp显示，在实际的应用中，这部分的数据一般是从数据库中取得的。
view plain copy to clipboard print ? package ajaxdemo.action; import ajaxdemo.dto.UserListDTO; import com.opensymphony.xwork2.ActionSupport; import java.util.ArrayList; import java.util.List; /** *//** Populates the user listing data */ public class UserListingAction extends ActionSupport { private List<UserListDTO> userList; // this is available in view automatically! public String execute() throws Exception { // create 2 user objects and add to a list System.out.println("*********1"); setUserList((List<UserListDTO>) new ArrayList()); UserListDTO user = new UserListDTO(); user.setId("gjose"); user.setName("Grace Joseph"); getUserList().add(user); user = new UserListDTO(); user.setId("peter"); user.setName("Peter Smith"); getUserList().add(user); System.out.println("*********2"); return SUCCESS; } public List<UserListDTO> getUserList() { return userList; } public void setUserList(List<UserListDTO> userList) { this.userList = userList; } }
package ajaxdemo.action; import ajaxdemo.dto.UserListDTO; import com.opensymphony.xwork2.ActionSupport; import java.util.ArrayList; import java.util.List; /** *//** Populates the user listing data */ public class UserListingAction extends ActionSupport { private List<UserListDTO> userList; // this is available in view automatically! public String execute() throws Exception { // create 2 user objects and add to a list System.out.println("*********1"); setUserList((List<UserListDTO>) new ArrayList()); UserListDTO user = new UserListDTO(); user.setId("gjose"); user.setName("Grace Joseph"); getUserList().add(user); user = new UserListDTO(); user.setId("peter"); user.setName("Peter Smith"); getUserList().add(user); System.out.println("*********2"); return SUCCESS; } public List<UserListDTO> getUserList() { return userList; } public void setUserList(List<UserListDTO> userList) { this.userList = userList; } }
六、ajaxdemo.action.UserDetailAction.java，当userid被选中时，取得用户详细数据，通过dojo来调用。
view plain copy to clipboard print ? package ajaxdemo.action; import ajaxdemo.dto.UserDetailDTO; import com.opensymphony.xwork2.ActionSupport; /**//* Populates user details for a user id selected */ public class UserDetailAction extends ActionSupport { private String userid; private UserDetailDTO userDetails; public String execute() throws Exception { // populate only when userid is selected if(userid!=null && !userid.equals("")) populateDetail(userid); return SUCCESS; } private void populateDetail(String id) { userDetails = new UserDetailDTO(); userDetails.setId(id); userDetails.setName("The Complete Name"); userDetails.setEmail("admin@struts2.org"); userDetails.setAddress("rich street, lavish road, Struts Land"); } public String getUserid() { return userid; } public void setUserid(String userid) { this.userid = userid; } public UserDetailDTO getUserDetails() { return userDetails; } public void setUserDetails(UserDetailDTO userDetails) { this.userDetails = userDetails; } }
package ajaxdemo.action; import ajaxdemo.dto.UserDetailDTO; import com.opensymphony.xwork2.ActionSupport; /**//* Populates user details for a user id selected */ public class UserDetailAction extends ActionSupport { private String userid; private UserDetailDTO userDetails; public String execute() throws Exception { // populate only when userid is selected if(userid!=null && !userid.equals("")) populateDetail(userid); return SUCCESS; } private void populateDetail(String id) { userDetails = new UserDetailDTO(); userDetails.setId(id); userDetails.setName("The Complete Name"); userDetails.setEmail("admin@struts2.org"); userDetails.setAddress("rich street, lavish road, Struts Land"); } public String getUserid() { return userid; } public void setUserid(String userid) { this.userid = userid; } public UserDetailDTO getUserDetails() { return userDetails; } public void setUserDetails(UserDetailDTO userDetails) { this.userDetails = userDetails; } }
七、ajaxdemo.dto.UserListDTO.java、POJO，用于封装用户信息
view plain copy to clipboard print ? package ajaxdemo.dto; public class UserListDTO { private String id; private String name; private String email; private String address; public String getId() { return id; } public void setId(String id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getEmail() { return email; } public void setEmail(String email) { this.email = email; } public String getAddress() { return address; } public void setAddress(String address) { this.address = address; } }
package ajaxdemo.dto; public class UserListDTO { private String id; private String name; private String email; private String address; public String getId() { return id; } public void setId(String id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getEmail() { return email; } public void setEmail(String email) { this.email = email; } public String getAddress() { return address; } public void setAddress(String address) { this.address = address; } }
八、ajaxdemo.dto.UserDetailDTO.java、POJO，用于封装用户信息
view plain copy to clipboard print ? package ajaxdemo.dto; public class UserDetailDTO { private String id; private String name; private String email; private String address; public String getId() { return id; } public void setId(String id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getEmail() { return email; } public void setEmail(String email) { this.email = email; } public String getAddress() { return address; } public void setAddress(String address) { this.address = address; } }
package ajaxdemo.dto; public class UserDetailDTO { private String id; private String name; private String email; private String address; public String getId() { return id; } public void setId(String id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getEmail() { return email; } public void setEmail(String email) { this.email = email; } public String getAddress() { return address; } public void setAddress(String address) { this.address = address; } }
OK，部署完毕后，输入http://localhost:8080/MyTest/UserListingAction.action来测试一下。当列表中的userid被点中后，javaScript通知Div标签从URL中动态加载返回内容。这个例子中，UserDetailAction取得用户信息并传递给userdetail.jsp。userdetail.jsp生成最终的展示结果，显示在Div中。
