首先,我们先创建一个简单的用例,在这个用例中,将在屏幕上显示一个用户列表,点击列表中的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
- <%@ 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加载
- <%@ 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显示,在实际的应用中,这部分的数据一般是从数据库中取得的。
- 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来调用。
- 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,用于封装用户信息
- 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,用于封装用户信息
- 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中。