当前位置:首页 > 开发 > 系统架构 > 架构 > 正文

Struts2中使用Ajax

发表于: 2010-03-31   作者:boaiting   来源:转载   浏览次数:
摘要: 本文主要看一下Struts2中的Div是如何用来输出Ajax结果。 首先,我们先创建一个简单的用例,在这个用例中,将在屏幕上显示一个用户列表,点击列表中的userid时,列表的下方将显示用户的详细信息,显示用户详细信息的这个步骤我们将使用Ajax。 一、创建web.xml <?xml version="1.0" encoding="
本文主要看一下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="#" 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中。

Struts2中使用Ajax

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
JSON插件提供了一种名为json的ResultType,一旦为某个Action指定了一个类型为json的Result,则该Res
JSON插件提供了一种名为json的ResultType,一旦为某个Action指定了一个类型为json的Result,则该Res
JSON插件提供了一种名为json的ResultType,一旦为某个Action指定了一个类型为json的Result,则该Res
前言: 由于ajax请求不像http请求,可以直接进行页面跳转,你返回的所有东西,ajax都只会识别为一个
下载 jsonplugin , jQuery 从网址http://code.google.com/p/jsonplugin/downloads/list下载JSON插
在当今——Web 2.0概念铺天盖地的Internet环境下,简易的AJAX集成对于一个成功的WEB框架来说是不可
专栏地址: http://www.iteye.com/wiki/struts2/1356-how-to-use-ognl-in-struts2 OGNL是XWork引入的
专栏地址: http://www.iteye.com/wiki/struts2/1356-how-to-use-ognl-in-struts2 OGNL是XWork引入的
如何在Struts中使用Ajax——《Struts与Ajax高级程序设计》<o:p></o:p> 数年以来,Strut
无论在Window应用程序,还是Web应用程序以对用户友好的方式显示运行时的异常都是很有必要,尤其对于可
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号