本文主要看一下Struts2中的Div是如何用来输出Ajax结果。


首先，我们先创建一个简单的用例，在这个用例中，将在屏幕上显示一个用户列表，点击列表中的userid时，列表的下方将显示用户的详细信息，显示用户详细信息的这个步骤我们将使用Ajax。



一、创建web.xml


Xml代码




  1.     <?xml version="1.0" encoding="UTF-8"?>    
  2.     <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">    
  3.       <filter>    
  4.         <filter-name>struts2</filter-name>    
  5.         <filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class>    
  6.       </filter>    
  7.       <filter-mapping>    
  8.         <filter-name>struts2</filter-name>    
  9.         <url-pattern>/*</url-pattern>    
  10.       </filter-mapping>    
  11.     </web-app>  



二、创建struts.xml


Xml代码





  1.     <!DOCTYPE struts PUBLIC    
  2.         "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"    
  3.         "http://struts.apache.org/dtds/struts-2.0.dtd">    
  4.     <struts>    
  5.         <package name="ajaxdemo" extends="struts-default">    
  6.             <action name="UserListingAction" class="ajaxdemo.action.UserListingAction">    
  7.                 <result>/userlisting.jsp</result>    
  8.             </action>    
  9.             <action name="UserDetailAction" class="ajaxdemo.action.UserDetailAction">    
  10.                 <result>/userdetail.jsp</result>    
  11.             </action>    
  12.         </package>    
  13.     </struts>    



三、页面：userlisting.jsp


Displays list of users


Html代码





  1.     <%@ taglib prefix="s" uri="/struts-tags" %>    
  2.     <html>    
  3.       <head>    
  4.         <s:head theme="ajax"/>    

  6.       </head>    
  7.       <script>    
  8.         function show_user_details(id) {    
  9.           document.frm_user.userid.value = id;    
  10.           dojo.event.topic.publish("show_detail");    
  11.         }    
  12.       </script>    
  13.       <body>    
  14.         <s:form id="frm_user" name="frm_user">    
  15.           <h1>User Listing</h1>    
  16.           <s:if test="userList.size > 0">    
  17.             <table border="1">    
  18.               <s:iterator value="userList">    
  19.                 <tr>    
  20.                   <td>    
  21.                     <s:a href="#" onclick="javascript:show_user_details('%{id}');return false;"><s:property value="id" /></s:a>    
  22.                   </td>    
  23.                   <td>    
  24.                     <s:property value="name" />    
  25.                   </td>    
  26.                 </tr>    
  27.               </s:iterator>    
  28.             </table>    
  29.           </s:if>    
  30.           <s:hidden name="userid"/>    
  31.           <s:url id="d_url" action="UserDetailAction" />    
  32.           <s:div  id="user_details" href="%{d_url}" theme="ajax" listenTopics="show_detail" formId="frm_user" >    
  33.           </s:div>    
  34.         </s:form>    
  35.       </body>    
  36.     </html>    



四、页面：userdetail.jsp，用于显示用户详细信息，由userlisting.jsp加载


Html代码  









  1.     <%@ taglib prefix="s" uri="/struts-tags" %>    
  2.     <h1>User Details</h1>    
  3.     <s:if test="userDetails != null">    
  4.         <table>    
  5.           <tr><td>Id:</td><td><s:property value="userDetails.id" /></td></tr>    
  6.           <tr><td>Name:</td><td><s:property value="userDetails.name" /></td></tr>    
  7.           <tr><td>Email:</td><td><s:property value="userDetails.email" /></td></tr>    
  8.           <tr><td>Address:</td><td><s:property value="userDetails.address" /></td></tr>    
  9.         </table>    
  10.     </s:if>    



五、ajaxdemo.action.UserListingAction.java，生成用户列表数据，交由userlisting.jsp显示，在实际的应用中，这部分的数据一般是从数据库中取得的。



Java代码








  1.     package ajaxdemo.action;    

  3.     import ajaxdemo.dto.UserListDTO;    
  4.     import com.opensymphony.xwork2.ActionSupport;    
  5.     import java.util.ArrayList;    
  6.     import java.util.List;    

  8.     /** *//** Populates the user listing data */    
  9.     public class UserListingAction extends ActionSupport {    

  11.         private List<UserListDTO> userList; // this is available in view automatically!    
  12.         public String execute() throws Exception {    

  14.             // create 2 user objects and add to a list    
  15.             setUserList((List<UserListDTO>) new ArrayList());    
  16.             UserListDTO user = new UserListDTO();    
  17.             user.setId("gjose");    
  18.             user.setName("Grace Joseph");    
  19.             getUserList().add(user);    

  21.             user = new UserListDTO();    
  22.             user.setId("peter");    
  23.             user.setName("PeterSmith");    
  24.             getUserList().add(user);    
  25.             return SUCCESS;    
  26.         }    

  28.         public List<UserListDTO> getUserList() {    
  29.             return userList;    
  30.         }    

  32.         public void setUserList(List<UserListDTO> userList) {    
  33.             this.userList = userList;    
  34.         }    
  35.     }  





六、ajaxdemo.action.UserDetailAction.java，当userid被选中时，取得用户详细数据，通过dojo来调用。



Java代码








  1.     package ajaxdemo.action;    

  3.     import ajaxdemo.dto.UserDetailDTO;    
  4.     import com.opensymphony.xwork2.ActionSupport;    

  6.     /**//* Populates user details for a user id selected */    
  7.     public class UserDetailAction extends ActionSupport {    

  9.         private String userid;    
  10.         private UserDetailDTO userDetails;    

  12.         public String execute() throws Exception {    
  13.             // populate only when userid is selected    
  14.             if(userid!=null && !userid.equals(""))    
  15.                 populateDetail(userid);    
  16.             return SUCCESS;    
  17.         }    

  19.         private void populateDetail(String id) {    
  20.             userDetails = new UserDetailDTO();    
  21.             userDetails.setId(id);    
  22.             userDetails.setName("The Complete Name");    
  23.             userDetails.setEmail("admin@struts2.org");    
  24.             userDetails.setAddress("rich street, lavish road, Struts Land");    
  25.         }    

  27.         public String getUserid() {    
  28.             return userid;    
  29.         }    

  31.         public void setUserid(String userid) {    
  32.             this.userid = userid;    
  33.         }    

  35.         public UserDetailDTO getUserDetails() {    
  36.             return userDetails;    
  37.         }    

  39.         public void setUserDetails(UserDetailDTO userDetails) {    
  40.             this.userDetails = userDetails;    
  41.         }    

  43.     }    



七、ajaxdemo.action.UserDetailDTO.java、POJO，用于封装用户信息



Java代码





  1.     package ajaxdemo.dto;    

  3.     public class UserDetailDTO {    

  5.         private String id;    
  6.         private String name;    
  7.         private String email;    
  8.         private String address;    

  10.         public String getId() {    
  11.             return id;    
  12.         }    

  14.         public void setId(String id) {    
  15.             this.id = id;    
  16.         }    

  18.         public String getName() {    
  19.             return name;    
  20.         }    

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

  26.         public String getEmail() {    
  27.             return email;    
  28.         }    

  30.         public void setEmail(String email) {    
  31.             this.email = email;    
  32.         }    

  34.         public String getAddress() {    
  35.             return address;    
  36.         }    

  38.         public void setAddress(String address) {    
  39.             this.address = address;    
  40.         }    
  41.     }  


OK，部署完毕后，输入http://localhost:8080/ajaxdemo/UserListingAction.action来测试一下。

当列表中的userid被点中后，javascript通知Div标签从URL中动态加载返回内容。这个例子中，UserDetailAction取得用户信息并传递给userdetail.jsp。userdetail.jsp生成最终的展示结果，显示在Div中。