Struts2+jQuery+JSON实现异步交互
浏览数：11 /
时间：2015年06月09日
Struts2+JQuery+JSON实现异步交互，包括从后台获得单个值、对象、List和Map数据并从前台的表达中获取值把值进行序列化通过JQuery的$.ajax({})传到后台和后台的对象进行绑定。
1.Struts2需要用到的包
这里我们以2.3.16.1为例
需要用到的jar如下
学过Struts2的同学应该很清楚这些包，除了两个似乎有点陌生，分别是struts2-json-plugin-2.3.16.1.jar和json-lib-2.1-jdk15.jar。
这两个包如果只是做普通的struts2项目，正常返回result对应的界面肯定是用不上的，但是如果需要Action返回json数据，就必须用到它们了，一个是struts2提供的json插件包，一个是插件所依赖的json解析包。
2.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"> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> <filter> <filter-name>struts2</filter-name> <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class> </filter> <filter-mapping> <filter-name>struts2</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> </web-app>
这个配置是广为人知的，引入该过滤器，就相当于引入struts2框架。
3.strus2.xml配置
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<!-- *****************************JSON************start********************************** -->
<package name="struts2-json" extends="json-default">
<action name="index" class="net.itcast.action.IndexAction">
<!-- 返回单个值的result -->
<result name="message" type="json"></result>
<!-- 返回UserInfo对象的 -->
<result name="user" type="json"></result>
<!-- 返回List对象的 -->
<result name="list" type="json">
<param name="excludeProperties">message,user,userMap,strList,strMap</param>
</result>
<!-- 返回Map对象的 -->
<result name="map" type="json"></result>
<result name="strlist" type="json"></result>
<result name="strmap" type="json"></result>
</action>
</package>
<!-- *****************************JSON************end********************************** -->
</struts>
strus2.xml配置 在包继承方面继承的不再是struts-default，而是json-default，以及返回类型也不再是redirect、dispatcher等，而是json。
这里我们看下json-default所对应的xml文件，它在定义中
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.1.7//EN"
"http://struts.apache.org/dtds/struts-2.1.7.dtd">
<struts>
<package name="json-default" extends="struts-default">
<result-types>
<result-type name="json" class="org.apache.struts2.json.JSONResult"/>
</result-types>
<interceptors>
<interceptor name="json" class="org.apache.struts2.json.JSONInterceptor"/>
</interceptors>
</package>
</struts>
看到这我们似乎明白了一些，type为json的在这里
被定义。
4.Action代码
public class IndexAction extends ActionSupport
{
private String message; // 使用json返回单个值
private User user; // 使用json返回对象
private List<User> userList; // 使用josn返回List对象
private Map<String, User> userMap; // 使用json返回Map对象
private List<String> strList;
private Map<String, String> strMap;
/**
* <p>
* 返回单个值
* <p>
*
* @return
*/
public String returnMessage()
{
this.message = "成功返回单个值";
return "message";
}
/**
* <p>
* 返回UserInfo对象
* </p>
*
* @return
*/
public String returnUser()
{
user = new User();
user.setUsername("张三");
user.setPassword("000000");
return "user";
}
/**
* <p>
* 返回List对象
* </p>
*
* @return
*/
public String returnList()
{
userList = new ArrayList<User>();
User u1 = new User();
u1.setUserid("10001");
u1.setUsername("张三");
u1.setPassword("000000");
User u2 = new User();
u2.setUserid("10002");
u2.setUsername("李四");
u2.setPassword("111111");
User u3 = new User();
u3.setUserid("10003");
u3.setUsername("王五");
u3.setPassword("222222");
User u4 = new User();
u4.setUserid("10004");
u4.setUsername("赵六");
u4.setPassword("333333");
userList.add(u1);
userList.add(u2);
userList.add(u3);
userList.add(u4);
return "list";
}
/**
* <p>
* 返回Map对象
* </p>
*
* @return
*/
public String returnMap()
{
userMap = new LinkedHashMap<String, User>();
User u1 = new User();
u1.setUserid("10000");
u1.setUsername("张三");
u1.setPassword("000000");
User u2 = new User();
u2.setUserid("10001");
u2.setUsername("李四");
u2.setPassword("111111");
User u3 = new User();
u3.setUserid("10002");
u3.setUsername("王五");
u3.setPassword("222222");
User u4 = new User();
u4.setUserid("10003");
u4.setUsername("赵六");
u4.setPassword("333333");
userMap.put(u1.getUserid() , u1);
userMap.put(u2.getUserid() , u2);
userMap.put(u3.getUserid() , u3);
userMap.put(u4.getUserid() , u4);
return "map";
}
public String returnStrList()
{
strList = new ArrayList<String>();
strList.add("张三");
strList.add("李四");
strList.add("王五");
strList.add("赵六");
return "strlist";
}
public String returnStrMap()
{
strMap = new LinkedHashMap<String,String>();
strMap.put("10000", "张三");
strMap.put("10001", "李四");
strMap.put("10002", "王五");
strMap.put("10003", "赵六");
return "strmap";
}
省略set、get方法
}
action代码看起来和之前所认知的action写法没多大区别，再还没有页面调用前我们依次访问下每一个action。
4.1 http://localhost:8080/jquery-struts2-json/index!returnMessage单个字符串
返回结果：
4.2 http://localhost:8080/jquery-struts2-json/index!returnUser 一个User对象
返回结果：
4.3 http://localhost:8080/jquery-struts2-json/index!returnList list集合封装的对象
返回结果
返回结果
返回结果
返回结果
<param name="excludeProperties">message,user,userMap,strList,strMap</param>
如果需要引入那些属性只需要同理配置<param name="includeProperties">message,user,userMap,strList,strMap</param>即可
5.页面中异步处理这些json数据
<body>
<input id="getMessage" class="btn" type="button" value="获取单个值"/>
<input id="getUser" class="btn" type="button" value="获取User对象"/>
<input id="getList" class="btn" type="button" value="获取List中的User对象"/>
<input id="getMap" class="btn" type="button" value="获取Map中的User对象"/>
<input id="getStrList" class="btn" type="button" value="获取List中的String值"/>
<input id="getStrMap" class="btn" type="button" value="获取Map中的String值"/>
<!-- 要显示信息的层 -->
<div id="message"></div>
</body>
获取单个值
$(document).ready(function(){
//为获取单个值的按钮注册鼠标单击事件
$("#getMessage").click(function()
{
$.ajax({
url:"index!returnMessage.action",
type:"POST",
dataType:"json",
success:function(data)
{
//清空显示层中的数据
$("#message").empty();
//通过.操作符可以从data.message中获得Action中message的值
$("#message").append("<font color=‘red‘>"+data.message+"</font>");
}
});
});
});效果图：
获取User对象
$(document).ready(function(){
$("#getUser").click(function()
{
$.ajax({
url:"index!returnUser.action",
type:"POST",
dataType:"json",
success:function(data)
{
//清空显示层中的数据
$("#message").empty();
//为显示层添加获取到的数据
//获取对象的数据用data.userInfo.[属性]
$("#message").append("<div><font color=‘red‘>用户名："+data.user.username+"</font></div>")
.append("<div><font color=‘red‘>密码："+data.user.password+"</font></div>");
}
});
});
});效果图
获取List中的User对象
$(document).ready(function(){
//为获取List对象按钮添加鼠标单击事件
$("#getList").click(function()
{
$.ajax({
url:"index!returnList.action",
type:"POST",
dataType:"json",
success:function(data)
{
//清空显示层中的数据
$("#message").empty();
//使用jQuery中的each(data,function(){});函数
//从data.userInfosList获取UserInfo对象放入value之中
$.each(data.userList,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中的User对象
$(document).ready(function(){
//为获取Map对象按钮添加鼠标单击事件
$("#getMap").click(function()
{
$.ajax({
url:"index!returnMap.action",
type:"POST",
dataType:"json",
success:function(data)
{
//清空显示层中的数据
$("#message").empty();
//使用jQuery中的each(data,function(){});函数
//从data.userInfosMap获取Map对象放入value之中
//key值为Map的键值
$.each(data.userMap,function(key,value)
{
$("#message").append("<div><font color=‘red‘>用户ID："+value.userid+"</font></div>")
.append("<div><font >用户名："+value.username+"</font></div>")
.append("<div><font color=‘red‘>密码："+value.password+"</font></div>");
});
}
});
});
});效果图
获取List中的String值
$(document).ready(function(){
$("#getStrList").click(function()
{
$.ajax({
url:"index!returnStrList.action",
type:"POST",
dataType:"json",
success:function(data)
{
//清空显示层中的数据
$("#message").empty();
$.each(data.strList,function(i,value)
{
$("#message").append("<div>第"+(i+1)+"个用户：</div>")
.append("<div><font color=‘red‘>用户名字："+value+"</font></div>");
});
}
});
});
});效果图
获取Map中的String值
$(document).ready(function(){
$("#getStrMap").click(function()
{
$.ajax({
url:"index!returnStrMap.action",
type:"POST",
dataType:"json",
success:function(data)
{
//清空显示层中的数据
$("#message").empty();
$.each(data.strMap,function(key,value)
{
$("#message").append("<div><font >用户ID："+key+"</font></div>")
.append("<div><font color=‘red‘>用户名："+value+"</font></div>");
});
}
});
});
});效果图
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
