如何在Struts2中使用Ajax

時間  2021-08-12
標籤 javascript html java web ajax 數據庫 apache app jsp ide 欄目 Struts 简体版
原文   原文鏈接

本文主要看一下Struts2中的Div是如何用來輸出Ajax結果。

首先，咱們先建立一個簡單的用例，在這個用例中，將在屏幕上顯示一個用戶列表，點擊列表中的userid時，列表的下方將顯示用戶的詳細信息，顯示用戶詳細信息的這個步驟咱們將使用Ajax。


1、建立web.xml

Xml代碼 javascript

  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>  


2、建立struts.xmlhtml


Xml代碼java


  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>    


3、頁面：userlisting.jspweb


Displays list of usersajax


Html代碼數據庫


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


4、頁面：userdetail.jsp，用於顯示用戶詳細信息，由userlisting.jsp加載apache


Html代碼  app



 
  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>    


5、ajaxdemo.action.UserListingAction.java，生成用戶列表數據，交由userlisting.jsp顯示，在實際的應用中，這部分的數據通常是從數據庫中取得的。jsp



Java代碼ide


 
  1.     package ajaxdemo.action;    
  2.        
  3.     import ajaxdemo.dto.UserListDTO;    
  4.     import com.opensymphony.xwork2.ActionSupport;    
  5.     import java.util.ArrayList;    
  6.     import java.util.List;    
  7.        
  8.     /** *//** Populates the user listing data */    
  9.     public class UserListingAction extends ActionSupport {    
  10.        
  11.         private List<UserListDTO> userList; // this is available in view automatically!    
  12.         public String execute() throws Exception {    
  13.                
  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);    
  20.                
  21.             user = new UserListDTO();    
  22.             user.setId("peter");    
  23.             user.setName("PeterSmith");    
  24.             getUserList().add(user);    
  25.             return SUCCESS;    
  26.         }    
  27.        
  28.         public List<UserListDTO> getUserList() {    
  29.             return userList;    
  30.         }    
  31.        
  32.         public void setUserList(List<UserListDTO> userList) {    
  33.             this.userList = userList;    
  34.         }    
  35.     }  




6、ajaxdemo.action.UserDetailAction.java，當userid被選中時，取得用戶詳細數據，經過dojo來調用。



Java代碼


 
  1.     package ajaxdemo.action;    
  2.        
  3.     import ajaxdemo.dto.UserDetailDTO;    
  4.     import com.opensymphony.xwork2.ActionSupport;    
  5.        
  6.     /**//* Populates user details for a user id selected */    
  7.     public class UserDetailAction extends ActionSupport {    
  8.            
  9.         private String userid;    
  10.         private UserDetailDTO userDetails;    
  11.            
  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.         }    
  18.            
  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.         }    
  26.        
  27.         public String getUserid() {    
  28.             return userid;    
  29.         }    
  30.        
  31.         public void setUserid(String userid) {    
  32.             this.userid = userid;    
  33.         }    
  34.        
  35.         public UserDetailDTO getUserDetails() {    
  36.             return userDetails;    
  37.         }    
  38.        
  39.         public void setUserDetails(UserDetailDTO userDetails) {    
  40.             this.userDetails = userDetails;    
  41.         }    
  42.        
  43.     }    


7、ajaxdemo.action.UserDetailDTO.java、POJO，用於封裝用戶信息



Java代碼


  1.     package ajaxdemo.dto;    
  2.        
  3.     public class UserDetailDTO {    
  4.        
  5.         private String id;    
  6.         private String name;    
  7.         private String email;    
  8.         private String address;    
  9.        
  10.         public String getId() {    
  11.             return id;    
  12.         }    
  13.        
  14.         public void setId(String id) {    
  15.             this.id = id;    
  16.         }    
  17.        
  18.         public String getName() {    
  19.             return name;    
  20.         }    
  21.        
  22.         public void setName(String name) {    
  23.             this.name = name;    
  24.         }    
  25.        
  26.         public String getEmail() {    
  27.             return email;    
  28.         }    
  29.        
  30.         public void setEmail(String email) {    
  31.             this.email = email;    
  32.         }    
  33.        
  34.         public String getAddress() {    
  35.             return address;    
  36.         }    
  37.        
  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中。

本文轉載自 http://www.itjianghu.net/120108/40916441631944443.htm

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程