Struts2+jQuery+JSON实现异步交互

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配置

[html]  view plain copy print ?

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"  
3.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
4.     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee   
5.     http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">  
6.     <welcome-file-list>  
7.         <welcome-file>index.jsp</welcome-file>  
8.     </welcome-file-list>  
9.   
10.     <filter>  
11.         <filter-name>struts2</filter-name>  
12.         <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>  
13.     </filter>  
14.     <filter-mapping>  
15.         <filter-name>struts2</filter-name>  
16.         <url-pattern>/*</url-pattern>  
17.     </filter-mapping>  
18.   
19. </web-app>  

这个配置是广为人知的，引入该过滤器，就相当于引入struts2框架。

3.strus2.xml配置

[html]  view plain copy print ?

1. <?xml version="1.0" encoding="UTF-8" ?>  
2. <!DOCTYPE struts PUBLIC  
3.     "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"  
4.     "http://struts.apache.org/dtds/struts-2.0.dtd">  
5.   
6. <struts>  
7.     <!-- *****************************JSON************start********************************** -->  
8.     <package name="struts2-json"  extends="json-default">    
9.           
10.         <action name="index" class="net.itcast.action.IndexAction">  
11.             <!-- 返回单个值的result -->  
12.             <result name="message" type="json"></result>  
13.             <!-- 返回User对象的 -->  
14.             <result name="user" type="json"></result>  
15.             <!-- 返回List对象的 -->  
16.             <result name="list" type="json">  
17.                 <param name="excludeProperties">message,user,userMap,strList,strMap</param>  
18.             </result>  
19.             <!-- 返回Map对象的 -->  
20.             <result name="map" type="json"></result>  
21.             <result name="strlist" type="json"></result>  
22.             <result name="strmap" type="json"></result>  
23.         </action>  
24.     </package>    
25.     <!-- *****************************JSON************end********************************** -->  
26. </struts>  

strus2.xml配置 在包继承方面继承的不再是 struts-default ，而是json-default，以及返回类型也不再是redirect、dispatcher等，而是json。

这里我们看下json-default所对应的xml文件，它在定义中

[html]  view plain copy print ?

1. <?xml version="1.0" encoding="UTF-8" ?>  
2.   
3. <!DOCTYPE struts PUBLIC  
4.     "-//Apache Software Foundation//DTD Struts Configuration 2.1.7//EN"  
5.     "http://struts.apache.org/dtds/struts-2.1.7.dtd">  
6.   
7. <struts>  
8.     <package name="json-default" extends="struts-default">  
9.         <result-types>  
10.             <result-type name="json" class="org.apache.struts2.json.JSONResult"/>  
11.         </result-types>  
12.         <interceptors>  
13.             <interceptor name="json" class="org.apache.struts2.json.JSONInterceptor"/>  
14.         </interceptors>  
15.     </package>  
16. </struts>  

看到这我们似乎明白了一些，type为json的在这里 被定义。

4.Action代码

[java]  view plain copy print ?

1. public class IndexAction extends ActionSupport  
2. {  
3.     private String message; // 使用json返回单个值  
4.     private User user; // 使用json返回对象  
5.     private List<User> userList; // 使用josn返回List对象  
6.     private Map<String, User> userMap; // 使用json返回Map对象  
7.     private List<String> strList;  
8.     private Map<String, String> strMap;   
9.   
10.     /** 
11.      * <p> 
12.      * 返回单个值 
13.      * <p> 
14.      *  
15.      * @return 
16.      */  
17.     public String returnMessage()  
18.     {  
19.         this.message = "成功返回单个值";  
20.         return "message";  
21.     }  
22.   
23.     /** 
24.      * <p> 
25.      * 返回UserInfo对象 
26.      * </p> 
27.      *  
28.      * @return 
29.      */  
30.     public String returnUser()  
31.     {  
32.         user = new User();  
33.         user.setUsername("张三");  
34.         user.setPassword("000000");  
35.         return "user";  
36.     }  
37.   
38.     /** 
39.      * <p> 
40.      * 返回List对象 
41.      * </p> 
42.      *  
43.      * @return 
44.      */  
45.     public String returnList()  
46.     {  
47.         userList = new ArrayList<User>();  
48.         User u1 = new User();  
49.         u1.setUserid("10001");  
50.         u1.setUsername("张三");  
51.         u1.setPassword("000000");  
52.         User u2 = new User();  
53.         u2.setUserid("10002");  
54.         u2.setUsername("李四");  
55.         u2.setPassword("111111");  
56.         User u3 = new User();  
57.         u3.setUserid("10003");  
58.         u3.setUsername("王五");  
59.         u3.setPassword("222222");  
60.         User u4 = new User();  
61.         u4.setUserid("10004");  
62.         u4.setUsername("赵六");  
63.         u4.setPassword("333333");  
64.         userList.add(u1);  
65.         userList.add(u2);  
66.         userList.add(u3);  
67.         userList.add(u4);  
68.         return "list";  
69.     }  
70.   
71.     /** 
72.      * <p> 
73.      * 返回Map对象 
74.      * </p> 
75.      *  
76.      * @return 
77.      */  
78.     public String returnMap()  
79.     {  
80.         userMap = new LinkedHashMap<String, User>();  
81.         User u1 = new User();  
82.         u1.setUserid("10000");  
83.         u1.setUsername("张三");  
84.         u1.setPassword("000000");  
85.         User u2 = new User();  
86.         u2.setUserid("10001");  
87.         u2.setUsername("李四");  
88.         u2.setPassword("111111");  
89.         User u3 = new User();  
90.         u3.setUserid("10002");  
91.         u3.setUsername("王五");  
92.         u3.setPassword("222222");  
93.         User u4 = new User();  
94.         u4.setUserid("10003");  
95.         u4.setUsername("赵六");  
96.         u4.setPassword("333333");  
97.         userMap.put(u1.getUserid() , u1);  
98.         userMap.put(u2.getUserid() , u2);  
99.         userMap.put(u3.getUserid() , u3);  
100.         userMap.put(u4.getUserid() , u4);  
101.         return "map";  
102.     }  
103.     public String returnStrList()  
104.     {  
105.         strList = new ArrayList<String>();  
106.         strList.add("张三");  
107.         strList.add("李四");  
108.         strList.add("王五");  
109.         strList.add("赵六");  
110.         return "strlist";  
111.     }  
112.     public String returnStrMap()  
113.     {  
114.         strMap = new LinkedHashMap<String,String>();  
115.         strMap.put("10000", "张三");  
116.         strMap.put("10001", "李四");  
117.         strMap.put("10002", "王五");  
118.         strMap.put("10003", "赵六");  
119.         return "strmap";  
120.     }  
121.   
122.     省略set、get方法  
123. }  

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集合封装的对象

      返回结果

4.4 http://localhost:8080/jquery-struts2-json/index!returnMap       Map集合封装的User对象

     返回结果 

4.5 http://localhost:8080/jquery-struts2-json/index!returnStrList       List集合封装的存放的String字符串
      返回结果

4.6 http://localhost:8080/jquery-struts2-json/index!returnStrMap      Map集合封装的存放的String字符串

      返回结果

看了上面的返回json结果发现是不是每一个key都对应着Action中的属性，如果没有值就为null，如果不想那些不显示的值显示出来是否可以呢，答案是可以的，只需要在struts.xml中的result中配置

<param name="excludeProperties">message,user,userMap,strList,strMap</param>

如果需要引入那些属性只需要同理配置<param name="includeProperties">message,user,userMap,strList,strMap</param>即可

5.页面中异步处理这些json数据

[html]  view plain copy print ?

1. <body>  
2.   <input id="getMessage"  class="btn"  type="button" value="获取单个值"/>  
3.   <input id="getUser" class="btn"   type="button" value="获取User对象"/>  
4.   <input id="getList"  class="btn"  type="button" value="获取List中的User对象"/>  
5.   <input id="getMap" class="btn"   type="button" value="获取Map中的User对象"/>  
6.   <input id="getStrList"  class="btn"  type="button" value="获取List中的String值"/>  
7.   <input id="getStrMap" class="btn"   type="button" value="获取Map中的String值"/>  
8.     
9.   <!-- 要显示信息的层 -->  
10.   <div id="message"></div>  
11. </body>  

获取单个值

[javascript]  view plain copy print ?

1. $(document).ready(function(){  
2.     //为获取单个值的按钮注册鼠标单击事件  
3.     $("#getMessage").click(function()  
4.     {  
5.         $.ajax({  
6.             url:"index!returnMessage.action",  
7.             type:"POST",  
8.             dataType:"json",  
9.             success:function(data)  
10.             {  
11.                 //清空显示层中的数据  
12.                 $("#message").empty();  
13.                 //通过.操作符可以从data.message中获得Action中message的值  
14.                 $("#message").append("<font color='red'>"+data.message+"</font>");  
15.             }  
16.         });  
17.     });   
18. });  

效果图：

获取User对象

[javascript]  view plain copy print ?

1. $(document).ready(function(){  
2.     $("#getUser").click(function()  
3.     {  
4.         $.ajax({  
5.             url:"index!returnUser.action",  
6.             type:"POST",  
7.             dataType:"json",  
8.             success:function(data)  
9.             {  
10.                 //清空显示层中的数据  
11.                 $("#message").empty();  
12.                 //为显示层添加获取到的数据  
13.                 //获取对象的数据用data.userInfo.[属性]  
14.                 $("#message").append("<div><font color='red'>用户名："+data.user.username+"</font></div>")  
15.                                     .append("<div><font color='red'>密码："+data.user.password+"</font></div>");  
16.             }  
17.         });  
18.     });  
19. });  

效果图

获取List中的User对象

[javascript]  view plain copy print ?

1. $(document).ready(function(){  
2.     //为获取List对象按钮添加鼠标单击事件  
3.     $("#getList").click(function()  
4.     {  
5.          $.ajax({  
6.             url:"index!returnList.action",  
7.             type:"POST",  
8.             dataType:"json",  
9.             success:function(data)  
10.             {  
11.                 //清空显示层中的数据  
12.                 $("#message").empty();  
13.                 //使用jQuery中的each(data,function(){});函数  
14.                 //从data.userInfosList获取UserInfo对象放入value之中  
15.                 $.each(data.userList,function(i,value)  
16.                 {  
17.                     $("#message").append("<div>第"+(i+1)+"个用户：</div>")  
18.                          .append("<div><font color='red'>用户ID："+value.userid+"</font></div>")  
19.                             .append("<div><font color='red'>用户名："+value.username+"</font></div>")  
20.                              .append("<div><font color='red'>密码："+value.password+"</font></div>");  
21.                  });  
22.             }  
23.         });  
24.     });  
25. });  

效果图

获取Map中的User对象

[javascript]  view plain copy print ?

1. $(document).ready(function(){  
2.     //为获取Map对象按钮添加鼠标单击事件  
3.     $("#getMap").click(function()  
4.     {  
5.         $.ajax({  
6.             url:"index!returnMap.action",  
7.             type:"POST",  
8.             dataType:"json",  
9.             success:function(data)  
10.             {  
11.                 //清空显示层中的数据  
12.                 $("#message").empty();  
13.                 //使用jQuery中的each(data,function(){});函数  
14.                 //从data.userInfosMap获取Map对象放入value之中  
15.                 //key值为Map的键值  
16.                 $.each(data.userMap,function(key,value)  
17.                 {  
18.                     $("#message").append("<div><font color='red'>用户ID："+value.userid+"</font></div>")  
19.                                             .append("<div><font >用户名："+value.username+"</font></div>")  
20.                                              .append("<div><font color='red'>密码："+value.password+"</font></div>");  
21.                 });  
22.             }  
23.         });  
24.      });  
25. });  

效果图

获取List中的String值

[javascript]  view plain copy print ?

1. $(document).ready(function(){  
2.     $("#getStrList").click(function()  
3.     {  
4.          $.ajax({  
5.             url:"index!returnStrList.action",  
6.             type:"POST",  
7.             dataType:"json",  
8.             success:function(data)  
9.             {  
10.                 //清空显示层中的数据  
11.                 $("#message").empty();  
12.                 $.each(data.strList,function(i,value)  
13.                 {  
14.                     $("#message").append("<div>第"+(i+1)+"个用户：</div>")  
15.                          .append("<div><font color='red'>用户名字："+value+"</font></div>");  
16.                  });  
17.             }  
18.         });  
19.     });  
20. });  

效果图

获取Map中的String值

[javascript]  view plain copy print ?

1. $(document).ready(function(){  
2.      $("#getStrMap").click(function()  
3.     {  
4.         $.ajax({  
5.             url:"index!returnStrMap.action",  
6.             type:"POST",  
7.             dataType:"json",  
8.             success:function(data)  
9.             {  
10.                 //清空显示层中的数据  
11.                 $("#message").empty();  
12.                 $.each(data.strMap,function(key,value)  
13.                 {  
14.                     $("#message").append("<div><font >用户ID："+key+"</font></div>")  
15.                                             .append("<div><font color='red'>用户名："+value+"</font></div>");  
16.                 });  
17.             }  
18.         });  
19.      });  
20. });  

效果图

ps：如果使用了Strus2框架，但没有引入json插件，我们又应当如何返回json呢？

我们可以这么做

[java]  view plain copy print ?

1. response.setContentType("text/json; charset=utf-8");  
2. response.setHeader("cache-control", "no-cache");  
3. response.setHeader("pragma","no-cache");  
4. PrintWriter out = response.getWriter();  

out直接返回json

简单的json可以直接手写，如out.print("{\"success\":"+true+",\"tip\":\"用户名已存在\"}");

复杂的json可以通过JSON、GSON转换工具进行转换，可以参考Java解析(读取)Json数据