本文主要看一下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技术。 1. **Ajax简介**: Ajax(Asynchronous JavaScript and XML)是...
首先,为了在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结合使用,实现页面的无刷新更新。 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
Struts2有一个Ajax插件,它提供了与JQuery集成的功能,使得在Struts2中使用Ajax变得更加方便。 2. **Struts2 Action配置**:首先,你需要在Struts2的配置文件(struts.xml)中定义一个Action,这个Action将会处理Ajax...
这些插件提供了预定义的Ajax行为,使得在Struts2中使用Ajax更加简单。例如,struts2-jquery-plugin提供了`remote`标签,可以直接在JSP页面上创建Ajax链接或表单。 工具方面,IDE如IntelliJ IDEA或Eclipse可以帮助你...
此外,为了更好地展示数据,可能还需要在Struts2中使用Interceptor(拦截器),例如,`params`拦截器用于将请求参数绑定到Action,`validation`拦截器负责验证表单数据,`workflow`拦截器管理Action的生命周期。...
这篇文档“struts与ajax.docx”可能包含了如何将Struts2和Ajax结合使用的详细步骤。通常,这个过程会涉及以下几个关键点: 1. **Struts2配置**:首先,需要在`struts.xml`配置文件中定义一个Action,这个Action将...
S2JS允许开发者更方便地在Struts 2中使用Ajax技术,它提供了一种更为简洁的方式来处理Ajax请求,并且内置了对JSON的支持,使得数据传输更为高效。 #### 结论 通过使用Ajax Taglibs,我们可以在Struts应用程序中...
7. **示例代码**:在提供的压缩包文件“struts2中实现AJAX的小实例”中,可能包含了一个简单的Struts2 Action、对应的JSP页面以及JavaScript代码。Action类可能有一个返回JSON数据的方法,JSP页面可能包含一个AJAX...
Struts2与Ajax 的实现原理,于Servlet+Ajax原理是一致的,都是通过后台的response.getWriter().print("");把数据传输给前台的。 前台Ajax格式如下(需要导入ajax库,比如:jquery-1.11.3.js) 格式: $(function()...
在Struts2中使用Ajax,我们通常会借助于jQuery库,因为其提供了方便的Ajax函数,如`$.ajax()`,`$.get()`,`$.post()`等。以下是一个简单的Struts2整合Ajax的小案例: 1. **创建Action类** 首先,我们需要创建一个...
标题 "Jquery struts2 json 实现ajax" 涉及到的是在Web开发中使用jQuery库与Struts2框架结合处理JSON数据的Ajax技术。这个主题主要关注如何通过前端的jQuery实现异步请求,与后端的Struts2框架进行交互,从而更新...
JSON插件允许开发者轻松地将Java对象转换为JSON格式,以便在AJAX请求和响应中使用。在Struts2的showcase应用中,JSON插件通过FreeMarker模板来展示如何输出JSON结果,虽然这种方式有一定的灵活性,但不如直接使用...
在Struts应用中使用Ajax
Struts2对Ajax的支持,不仅体现在其对流行Ajax框架的集成上,更在于它通过一系列易于使用的标签和功能,极大地简化了Ajax技术的应用难度,使得开发者能够更加专注于业务逻辑的实现,而不是陷入技术细节的泥潭。...
要在项目中使用Struts2的AJAX功能,首先需要将`struts2-jquery-plugin`添加到项目的类路径中。这通常意味着在`pom.xml`文件中添加对应的Maven依赖,或者将jar文件放入项目的lib目录。 2. **配置Struts2 jQuery插件...
4. **Struts 2与AJAX的集成**:介绍如何在Struts 2应用中使用AJAX,可能包括XMLHttpRequest对象、JSON数据格式、以及Struts2-AJAX插件的使用。 5. **实战示例**:提供了一些实际的开发案例,如创建一个简单的Struts ...
### Struts2中常用的Ajax标签解析 在Struts2框架中,为了简化Ajax通信过程,引入了一系列便捷的Ajax标签,这些标签能够有效地提高Web应用程序的交互性和用户体验。本文将深入探讨Struts2中常用的Ajax标签及其用法,...
Struts2、jQuery和Ajax是Web开发中的三个关键组件,它们共同构成了文件异步上传的基础框架。这个项目是在MyEclipse环境下实现的一个简单的文件上传功能,让我们深入了解一下这些技术及其在文件上传中的应用。 首先...