`
boaiting
  • 浏览: 9791 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
最近访客 更多访客>>
社区版块
存档分类
最新评论

Struts2中使用Ajax

    博客分类:
  • ssh
阅读更多
本文主要看一下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

    在Struts2中使用Ajax,可以实现页面的部分更新,提高用户体验,而无需每次操作都刷新整个页面。下面将详细介绍如何在Struts2中集成和使用Ajax技术。 1. **Ajax简介**: Ajax(Asynchronous JavaScript and XML)是...

    Struts2 ajax json使用介绍

    首先,为了在Struts2中使用Ajax和JSON,我们需要引入以下库: 1. Struts2的核心库:`struts2-core.jar` 2. Struts2的JSON插件:`struts2-json-plugin.jar` 3. JSON处理库:`json-lib.jar`(通常在Struts2的JSON插件...

    Struts2+Jquery+Ajax

    在Struts2中,Jquery可以与Ajax结合使用,实现页面的无刷新更新。 Ajax(Asynchronous JavaScript and XML)技术允许前端与后台进行异步通信,无需整个页面刷新,提高了用户体验。在Struts2框架下,我们可以使用...

    Ajax struts2 xml flex Ajax struts2 xml flex Ajax struts2 xml flex Ajax struts2 xml flex

    Ajax struts2 xml flex Ajax struts2 xml flex Ajax struts2 xml flex Ajax struts2 xml flex Ajax struts2 xml flex Ajax struts2 xml flex

    struts2应用ajax

    Struts2有一个Ajax插件,它提供了与JQuery集成的功能,使得在Struts2中使用Ajax变得更加方便。 2. **Struts2 Action配置**:首先,你需要在Struts2的配置文件(struts.xml)中定义一个Action,这个Action将会处理Ajax...

    struts2实现ajax

    这些插件提供了预定义的Ajax行为,使得在Struts2中使用Ajax更加简单。例如,struts2-jquery-plugin提供了`remote`标签,可以直接在JSP页面上创建Ajax链接或表单。 工具方面,IDE如IntelliJ IDEA或Eclipse可以帮助你...

    struts2ajax项目

    此外,为了更好地展示数据,可能还需要在Struts2中使用Interceptor(拦截器),例如,`params`拦截器用于将请求参数绑定到Action,`validation`拦截器负责验证表单数据,`workflow`拦截器管理Action的生命周期。...

    struts2的Ajax实现注册验证

    这篇文档“struts与ajax.docx”可能包含了如何将Struts2和Ajax结合使用的详细步骤。通常,这个过程会涉及以下几个关键点: 1. **Struts2配置**:首先,需要在`struts.xml`配置文件中定义一个Action,这个Action将...

    Struts on Ajax-Retrofitting Struts with Ajax Taglibs

    S2JS允许开发者更方便地在Struts 2中使用Ajax技术,它提供了一种更为简洁的方式来处理Ajax请求,并且内置了对JSON的支持,使得数据传输更为高效。 #### 结论 通过使用Ajax Taglibs,我们可以在Struts应用程序中...

    struts2中AJAX实现

    7. **示例代码**:在提供的压缩包文件“struts2中实现AJAX的小实例”中,可能包含了一个简单的Struts2 Action、对应的JSP页面以及JavaScript代码。Action类可能有一个返回JSON数据的方法,JSP页面可能包含一个AJAX...

    Struts2与Ajax 精简源码

    Struts2与Ajax 的实现原理,于Servlet+Ajax原理是一致的,都是通过后台的response.getWriter().print("");把数据传输给前台的。 前台Ajax格式如下(需要导入ajax库,比如:jquery-1.11.3.js) 格式: $(function()...

    struts2 ajax小案例

    在Struts2中使用Ajax,我们通常会借助于jQuery库,因为其提供了方便的Ajax函数,如`$.ajax()`,`$.get()`,`$.post()`等。以下是一个简单的Struts2整合Ajax的小案例: 1. **创建Action类** 首先,我们需要创建一个...

    Jquery struts2 json 实现ajax

    标题 "Jquery struts2 json 实现ajax" 涉及到的是在Web开发中使用jQuery库与Struts2框架结合处理JSON数据的Ajax技术。这个主题主要关注如何通过前端的jQuery实现异步请求,与后端的Struts2框架进行交互,从而更新...

    Struts2与AJAX

    JSON插件允许开发者轻松地将Java对象转换为JSON格式,以便在AJAX请求和响应中使用。在Struts2的showcase应用中,JSON插件通过FreeMarker模板来展示如何输出JSON结果,虽然这种方式有一定的灵活性,但不如直接使用...

    在Struts应用中使用Ajax

    在Struts应用中使用Ajax

    Struts2的ajax支持

    Struts2对Ajax的支持,不仅体现在其对流行Ajax框架的集成上,更在于它通过一系列易于使用的标签和功能,极大地简化了Ajax技术的应用难度,使得开发者能够更加专注于业务逻辑的实现,而不是陷入技术细节的泥潭。...

    struts2对AJAX的支持

    要在项目中使用Struts2的AJAX功能,首先需要将`struts2-jquery-plugin`添加到项目的类路径中。这通常意味着在`pom.xml`文件中添加对应的Maven依赖,或者将jar文件放入项目的lib目录。 2. **配置Struts2 jQuery插件...

    Struts 2及AJAX框架的详细介绍

    4. **Struts 2与AJAX的集成**:介绍如何在Struts 2应用中使用AJAX,可能包括XMLHttpRequest对象、JSON数据格式、以及Struts2-AJAX插件的使用。 5. **实战示例**:提供了一些实际的开发案例,如创建一个简单的Struts ...

    Struts2常用的Ajax标签

    ### Struts2中常用的Ajax标签解析 在Struts2框架中,为了简化Ajax通信过程,引入了一系列便捷的Ajax标签,这些标签能够有效地提高Web应用程序的交互性和用户体验。本文将深入探讨Struts2中常用的Ajax标签及其用法,...

    struts2+jquery+ajax文件异步上传

    Struts2、jQuery和Ajax是Web开发中的三个关键组件,它们共同构成了文件异步上传的基础框架。这个项目是在MyEclipse环境下实现的一个简单的文件上传功能,让我们深入了解一下这些技术及其在文件上传中的应用。 首先...

Global site tag (gtag.js) - Google Analytics