请参见:
Struts2.2+Spring3.1+Hibernate3.6整合(登录示例)
http://liuzidong.iteye.com/blog/935493
在这个示例作了修改!
参考资料
1 Struts2+jQuery+JSON实现异步交互
http://qsfwy.iteye.com/blog/682796
2 主题:[原创]Struts2 + JQuery + JSON实现AJAX
http://www.iteye.com/topic/560638
说明:主要参考了 Struts2+jQuery+JSON实现异步交互 文章,只不过原作者使用Struts2版本是是:2.1.8及json-lib.2.1.jar,在Struts2中的插件: struts2-json-plugin-2.2.1.1.jar已经不在需要json-lib.jar了,Jquery为1.5.1,在此表示向你感谢!学会了Struts2+jQueryJSON
一 环境:XP+Myeclipse6.6+WebLogic92+JDK1.5
二 具体步骤如下:
所需要的jar文件为:struts2-json-plugin-2.2.1.1.jar加入WEB-INF/lib下
所有代码引用Struts2+jQuery+JSON实现异步交互的代码,请理解!
1 JsonJqueryStruts2Action.java
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import com.liuzd.s2sh.entity.json.UserInfo;
import com.opensymphony.xwork2.ActionSupport;
public class JsonJqueryStruts2Action extends ActionSupport {
private static final long serialVersionUID = 3518833679938898354L;
private String message; //使用json返回单个值
private UserInfo userInfo; //使用json返回对象
private List<UserInfo> userInfosList; //使用josn返回List对象
private Map<String,UserInfo> userInfosMap; //使用json返回Map对象
//为上面的的属性提供get,Set方法
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
public UserInfo getUserInfo() {
return userInfo;
}
public void setUserInfo(UserInfo userInfo) {
this.userInfo = userInfo;
}
public List<UserInfo> getUserInfosList() {
return userInfosList;
}
public void setUserInfosList(List<UserInfo> userInfosList) {
this.userInfosList = userInfosList;
}
public Map<String, UserInfo> getUserInfosMap() {
return userInfosMap;
}
public void setUserInfosMap(Map<String, UserInfo> userInfosMap) {
this.userInfosMap = userInfosMap;
}
/**
* <p>
* 返回单个值
* <p>
* @return
*/
public String returnMessage(){
this.message = "成功返回单个值";
return "message";
}
/**
* <p>
* 返回UserInfo对象
* </p>
* @return
*/
public String returnUserInfo(){
userInfo = new UserInfo();
userInfo.setUserId(10000);
userInfo.setUserName("张三");
userInfo.setPassword("000000");
return "userInfo";
}
/**
* <p>
* 返回List对象
* </p>
* @return
*/
public String returnList(){
userInfosList = new ArrayList<UserInfo>();
UserInfo u1 = new UserInfo();
u1.setUserId(10000);
u1.setUserName("张三");
u1.setPassword("000000");
UserInfo u2 = new UserInfo();
u2.setUserId(10001);
u2.setUserName("李四");
u2.setPassword("111111");
UserInfo u3 = new UserInfo();
u3.setUserId(10002);
u3.setUserName("王五");
u3.setPassword("222222");
UserInfo u4 = new UserInfo();
u4.setUserId(10003);
u4.setUserName("赵六");
u4.setPassword("333333");
userInfosList.add(u1);
userInfosList.add(u2);
userInfosList.add(u3);
userInfosList.add(u4);
return "list";
}
/**
* <p>
* 返回Map对象
* </p>
* @return
*/
public String returnMap(){
userInfosMap = new HashMap<String,UserInfo>();
UserInfo u1 = new UserInfo();
u1.setUserId(10000);
u1.setUserName("张三");
u1.setPassword("000000");
UserInfo u2 = new UserInfo();
u2.setUserId(10001);
u2.setUserName("李四");
u2.setPassword("111111");
UserInfo u3 = new UserInfo();
u3.setUserId(10002);
u3.setUserName("王五");
u3.setPassword("222222");
UserInfo u4 = new UserInfo();
u4.setUserId(10003);
u4.setUserName("赵六");
u4.setPassword("333333");
userInfosMap.put(u1.getUserId()+"", u1);
userInfosMap.put(u2.getUserId()+"", u2);
userInfosMap.put(u3.getUserId()+"", u3);
userInfosMap.put(u4.getUserId()+"", u4);
return "map";
}
/**
* <p>
* 获得对象,也就是通过表达获得对象(异步的)
* </P>
* @return
*/
public String gainUserInfo(){
System.out.println("用户ID:"+userInfo.getUserId());
System.out.println("用户名:"+userInfo.getUserName());
System.out.println("密码:"+userInfo.getPassword());
return "userInfo";
}
/**
* 获得单个值就不用写了和平常一样
*/
}
2 测试JSP页面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
%>
<html>
<head>
<title>Struts2+JQuery+JSON</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="<%=path %>/js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="<%=path%>/js/json.js"></script>
</head>
<body>
<input id="getMessage" type="button" value="获取单个值" />
<input id="getUserInfo" type="button" value="获取UserInfo对象" />
<input id="getList" type="button" value="获取List对象" />
<input id="getMap" type="button" value="获取Map对象" />
<br>
<br>
<br>
<!-- 要显示信息的层 -->
<div id="message"></div>
<form>
用户ID:
<input name="userInfo.userId" type="text" />
<br />
用户名:
<input name="userInfo.userName" type="text" />
<br />
密 码:
<input name="userInfo.password" type="text" />
<br>
<input id="regRe" type="button" value="注册" />
</form>
</body>
</html>
3 json.js代码
//初始加载页面时
$(document).ready(function(){
//为获取单个值的按钮注册鼠标单击事件
$("#getMessage").click(function(){
$.getJSON("jsontest!returnMessage.action",function(data){
//通过.操作符可以从data.message中获得Action中message的值
$("#message").html("<font color='red'>"+data.message+"</font>");
});
});
//为获取UserInfo对象按钮添加鼠标单击事件
$("#getUserInfo").click(function(){
$.getJSON("jsontest!returnUserInfo.action",function(data){
//清空显示层中的数据
$("#message").html("");
//为显示层添加获取到的数据
//获取对象的数据用data.userInfo.属性
$("#message").append("<div><font color='red'>用户ID:"+data.userInfo.userId+"</font></div>")
.append("<div><font color='red'>用户名:"+data.userInfo.userName+"</font></div>")
.append("<div><font color='red'>密码:"+data.userInfo.password+"</font></div>")
});
});
//为获取List对象按钮添加鼠标单击事件
$("#getList").click(function(){
$.getJSON("jsontest!returnList.action",function(data){
//清空显示层中的数据
$("#message").html("");
//使用jQuery中的each(data,function(){});函数
//从data.userInfosList获取UserInfo对象放入value之中
$.each(data.userInfosList,function(i,value){
$("#message").append("<div>第"+(i+1)+"个用户:</div>")
.append("<div><font color='red'>用户ID:"+value.userId+"</font></div>")
.append("<div><font color='red'>用户名:"+value.userName+"</font></div>")
.append("<div><font color='red'>密码:"+value.password+"</font></div>");
});
});
});
//为获取Map对象按钮添加鼠标单击事件
$("#getMap").click(function(){
$.getJSON("jsontest!returnMap.action",function(data){
//清空显示层中的数据
$("#message").html("");
//使用jQuery中的each(data,function(){});函数
//从data.userInfosList获取UserInfo对象放入value之中
//key值为Map的键值
$.each(data.userInfosMap,function(key,value){
$("#message").append("<div><font color='red'>用户ID:"+value.userId+"</font></div>")
.append("<div><font color='red'>用户名:"+value.userName+"</font></div>")
.append("<div><font color='red'>密码:"+value.password+"</font></div>");
});
});
});
//向服务器发送表达数据
$("#regRe").click(function(){
//把表单的数据进行序列化
var params = $("form").serialize();
//使用jQuery中的$.ajax({});Ajax方法
$.ajax({
url:"jsontest!gainUserInfo.action",
type:"POST",
data:params,
dataType:"json",
success:function(data){
//清空显示层中的数据
$("#message").html("");
//为显示层添加获取到的数据
//获取对象的数据用data.userInfo.属性
$("#message").append("<div><font color='red'>用户ID:"+data.userInfo.userId+"</font></div>")
.append("<div><font color='red'>用户名:"+data.userInfo.userName+"</font></div>")
.append("<div><font color='red'>密码:"+data.userInfo.password+"</font></div>")
}
});
});
});
说明:附件中只有:struts2-json-plugin-2.2.1.1.jar与jquery-1.5.1.min.js
分享到:
相关推荐
Struts2、JSON和JQuery是Web开发中的三个关键技术,它们常常被结合使用来构建高效、动态的用户界面。在本教程中,我们将探讨如何利用这些技术实现一个简单的验证功能。 首先,Struts2是一个基于MVC(Model-View-...
这个"Struts2 Tiles JSON jQuery Convention"的资料包可能是为了展示如何在Struts2框架下结合Tiles、JSON和jQuery实现高效、灵活的Web应用开发。下面将详细解释这些技术的结合以及它们如何协同工作。 1. **Struts2*...
Struts2、Ajax、JSON和jQuery是Web开发中常见的技术,它们共同构建了现代Web应用程序的交互性。在这个"struts2 Ajax json Jquery demo"中,我们将探讨这些技术如何协同工作,创建一个异步数据交换的示例。 首先,...
这个资源"struts2+json"显然涉及到在Struts2框架下实现JSON(JavaScript Object Notation)数据交换,这是一种轻量级的数据交换格式,广泛用于前后端交互,特别是AJAX(Asynchronous JavaScript and XML)请求。...
Struts2 Jquery JSON Struts2 Jquery JSON Struts2 Jquery JSON Struts2 Jquery JSON Struts2 Jquery JSON Struts2 Jquery JSON Struts2 Jquery JSON Struts2 Jquery JSON
这个插件允许开发者在Struts 2中轻松地创建能够返回JSON的Action,使得前端(通常使用JavaScript库如jQuery)可以获取到JSON数据并进行进一步处理。 现在我们来详细讨论这两个库在实际应用中的作用: 1. **json-...
Struts2、JSON和jQuery是Web开发中常用的三个技术,它们在构建动态、交互式的Web应用程序时发挥着关键作用。这个例子将展示如何整合这三个工具,实现前后端的数据交换。 首先,Struts2是一个强大的MVC(Model-View-...
在"Struts2.2 项目搭建 以及与 struts2-json jquery 前后台进行交互"的主题中,我们主要会探讨以下几个知识点: 1. **Struts2 项目搭建**: - **环境配置**:首先需要安装JDK,设置好环境变量,然后安装Apache ...
例如,在前端使用jQuery等库发起AJAX请求,获取或发送JSON格式的数据,而在后端,Struts2框架则能够无缝处理这些JSON数据,从而构建出响应迅速、用户体验优秀的Web应用。 综上所述,Struts2与JSON的整合不仅提升了...
"Struts2+JSON+jQuery实现Ajax数据的存取"就是一个典型的示例,它结合了强大的MVC框架Struts2、轻量级的数据交换格式JSON以及高效的前端库jQuery,以实现网页上的无刷新数据交互。下面将详细介绍这三个技术及其在...
在本文中,我们将探讨两种在Struts2框架中返回JSON数据的方法。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,广泛用于前后端交互,尤其是在AJAX请求中。Struts2提供了一套方便的机制来支持JSON...
Struts2支持JSON的处理,使得开发人员能够轻松地将Java对象转换为JSON格式,然后发送到客户端,或者将JSON数据解析成Java对象。下面我们将深入探讨Struts2集成JSON的相关知识点。 1. **Struts2 JSON插件**: ...
Struts2、JSON和jQuery是Web开发中的三个关键组件,它们在构建动态、交互式的Web应用程序中发挥着重要作用。在这个“struts2.json.jquery简单实例”中,我们将深入理解这三个技术如何协同工作,以实现高效的数据交换...
Struts2JQueryJson是一个基于Struts2框架与jQuery库,结合JSON(JavaScript Object Notation)数据格式,实现Ajax异步加载对象数据的技术方案。在Web应用开发中,这种技术可以提升用户体验,因为它允许页面部分内容...
2. **Struts2 JSON插件**:Struts2提供了一个JSON插件(`struts2-json-plugin.jar`),它允许我们将Action的返回值直接转换为JSON格式,便于前后端数据交换。这个插件简化了原本需要手动序列化对象到JSON字符串的...
Struts2、JSON、jQuery 和 EasyUI 是四个在Web开发领域广泛应用的技术,它们共同构建了一个高效、用户友好的项目框架。下面将详细解释这些技术及其在项目中的作用。 **Struts2** Struts2 是一个基于MVC(Model-View...
1. **Struts2 JSON插件**:Struts2提供了内置的JSON插件,允许我们直接将Action的返回值转换为JSON格式。安装并配置该插件后,只需在Action类的方法上添加`@Result(type="json")`注解,即可启用JSON响应。 2. **...
2. Struts2的JSON插件:`struts2-json-plugin.jar` 3. JSON处理库:`json-lib.jar`(通常在Struts2的JSON插件中已经包含) 确保这些库被添加到项目的类路径中,以便Struts2能够解析并返回JSON数据。 **二、编写...