Struts2中使用Ajax

boaiting · 发表于 2013-2-6 08:41:57

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

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

一、创建web.xml

<?xml version="1.0" encoding="UTF-8"?> <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"> <filter>    <filter-name>struts2</filter-name>    <filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class> </filter> <filter-mapping>    <filter-name>struts2</filter-name>    <url-pattern>/*</url-pattern> </filter-mapping> </web-app>

二、创建struts.xml
<!DOCTYPE struts PUBLIC    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"    "http://struts.apache.org/dtds/struts-2.0.dtd"> <struts>    <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> </struts>

三、页面：userlisting.jsp
Displays list of users
<%@ taglib prefix="s" uri="/struts-tags" %> <html> <head>    <s:head theme="ajax"/>    </head> <script>    function show_user_details(id) {    document.frm_user.userid.value = id;    dojo.event.topic.publish("show_detail");    } </script> <body>    <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="#" ><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" />    <s:div  id="user_details" href="%{d_url}" theme="ajax" listenTopics="show_detail" formId="frm_user" >    </s: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       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("PeterSmith");       getUserList().add(user);       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.action.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/ajaxdemo/UserListingAction.action来测试一下。
当列表中的userid被点中后，javaScript通知Div标签从URL中动态加载返回内容。这个例子中，UserDetailAction取得用户信息并传递给userdetail.jsp。userdetail.jsp生成最终的展示结果，显示在Div中。

		自动登录	找回密码
密码			立即注册