首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Ajax >

Struts2中应用Ajax

2012-10-12 
Struts2中使用Ajax本文主要看一下Struts2中的Div是如何用来输出Ajax结果。 首先,我们先创建一个简单的用例,

Struts2中使用Ajax
本文主要看一下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" name="code"><%@ 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="#" onclick="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" />       <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中。 1 楼 beyond_world 2012-08-30  
在哪里找的代码?

呵呵。。请教下了。
不过有个地方错了。兄台。

2 楼 beyond_world 2012-08-30   浪费时间。日

热点排行