`
wanglihu
  • 浏览: 918516 次
  • 性别: Icon_minigender_1
  • 来自: 黑龙江
社区版块
存档分类

Struts2与Ajax

AjaxStrutsJSPDojoApache 
阅读更多
Struts2和Struts相比，一个重大改进就是支持Ajax。　本文主要看一下Struts2中的Div是如何用来输出Ajax结果，其中主要使用了Dojo。

首先，我们先创建一个简单的用例，在这个用例中，将在屏幕上显示一个用户列表，点击列表中的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中。
分享到：
| 用ajax实现下拉列表的联动
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Struts2与Ajax 精简源码

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

    Struts2与AJAX.pdf

    Struts2与AJAX

    Struts 2与AJAX

    Struts 2与AJAX是Web开发领域中的两个关键技术，它们在构建动态、交互式的Web应用程序中发挥着重要作用。Struts 2是一个基于MVC（Model-View-Controller）设计模式的Java EE框架，它提供了丰富的特性来简化企业级...

    第10章 Struts 2与Ajax.ppt

    第10章 Struts 2与Ajax.ppt

    Struts2与AJAX

    Struts2为了满足这种需求，实现了与AJAX的无缝集成，提供了一流的AJAX支持。 Struts2的AJAX支持并不是从零开始创建一个新的AJAX框架，而是选择了当时在Java EE平台上广泛使用的AJAX库，如Dojo和Direct Web Remoting...

    struts2与Ajax.pdf

    ### Struts2与Ajax知识点详解 #### 一、Struts2与AJAX的结合 在Web 2.0时代，用户界面的交互性和响应性变得至关重要。为了满足这一需求，Struts2框架提供了强大的AJAX支持，使得开发人员能够轻松地在应用程序中...

    Struts2与Ajax结合输入验证[包含功能代码段]

    将Struts2与Ajax结合，可以实现动态、异步的数据验证，提高应用的响应速度和效率。 在Struts2中，输入验证是必不可少的一环，它确保用户提交的数据符合预设的规则，如非空检查、数据类型验证等。传统的验证方式通常...

    Struts2+Jquery+Ajax

    6. Struts2与Ajax的集成，使用JQuery的$.ajax()或$.getJSON()方法 7. 请求与响应的处理，包括参数传递和数据封装 8. 实例演示：使用Struts2+Jquery+Ajax实现动态加载数据或表单验证 "struts2 jar"文件包含了Struts2...

    struts2中AJAX实现

    综上所述，Struts2与AJAX的结合使得Web应用能够实现无刷新的用户体验，提高了交互性和效率。理解并熟练掌握这一技术，对于提升Web应用的质量和用户体验至关重要。在实际开发中，开发者还需要考虑错误处理、安全性...

    Struts 2及AJAX框架的详细介绍

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

    struts2实现ajax功能所需的jar包

    首先，我们需要了解Struts2与AJAX交互的基本原理。在AJAX中，JavaScript通常通过XMLHttpRequest对象与服务器进行异步通信，发送请求并接收响应。在Struts2框架下，我们可以利用Struts2的Action类和结果类型来处理...

    struts2实现ajax

    2. **Struts2与Ajax集成**： Struts2框架支持多种方式来实现Ajax请求。其中一种是通过使用Struts2的插件，如`struts2-jquery-plugin`或`struts2-dojo-plugin`，这些插件为开发者提供了丰富的JavaScript库和动作支持...

    struts2的Ajax实现注册验证

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

    struts2+ajax

    当Struts2与Ajax结合使用时，可以实现更高效的页面交互，提供更流畅的用户界面。 Struts2对Ajax的支持是通过一系列的AJAX标签实现的，这些标签允许开发者在不编写大量JavaScript代码的情况下，轻松地添加Ajax功能到...

    struts2中使用ajax

    2. **Struts2与Ajax整合**： Struts2框架通过Struts2-jQuery插件或Struts2-Conventions插件来支持Ajax功能。这两个插件提供了方便的标签库，使得在JSP页面中使用Ajax变得更加简单。 3. **Struts2-jQuery插件**： ...

    struts2ajax项目

    Struts2是一个强大的MVC（模型-视图-控制器）框架，它在Java ...通过这个项目，你可以学习到Struts2的Action配置、Ajax请求的发送与接收、以及前端和后端的数据处理。这将对理解和提升你的Java Web开发技能大有裨益。

    json2+jsonplugin struts2整合ajax时，使用json时需要的jar包

    在Struts2与Ajax的交互中，后端返回的JSON数据需要在前端被`json2.js`解析成可操作的对象，这样才能在页面上动态更新内容。 接下来，我们讨论Struts2的`jsonplugin`。Struts2 JSON插件是官方提供的一个扩展，它使...

    使用struts2 和ajax进行传递json数据

    **Struts2与Ajax交互** 在Struts2中，可以通过配置Action来处理Ajax请求。Action类中的方法可以返回一个值，这个值可以映射到一个视图，也可以是JSON字符串。使用`@Result`注解或struts.xml配置文件，可以指定一个...

    Struts2的ajax支持

    #### Ajax概述与Struts2的融合 在现代Web2.0技术蓬勃发展的背景下，Ajax技术因其能够实现网页的异步加载与交互性提升，成为了构建动态网页的重要组成部分。Struts2框架，作为Java Web开发中的明星框架之一，自然也...

Magicbox
Global site tag (gtag.js) - Google Analytics