http://blog.csdn.net/lovesomnus/article/details/24243635
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>
- <!-- 返回User对象的 -->
- <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>
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>");
- });
- }
- });
- });
- });
ps:如果使用了Strus2框架,但没有引入json插件,我们又应当如何返回json呢?
我们可以这么做
- response.setContentType("text/json; charset=utf-8");
- response.setHeader("cache-control", "no-cache");
- response.setHeader("pragma","no-cache");
- PrintWriter out = response.getWriter();
out直接返回json
简单的json可以直接手写,如out.print("{\"success\":"+true+",\"tip\":\"用户名已存在\"}");
复杂的json可以通过JSON、GSON转换工具进行转换,可以参考Java解析(读取)Json数据