Struts2+jQuery+JSON实现异步交互

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 plaincopyprint?
<?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配置
[html] view plaincopyprint?
<?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文件，它在定义中
[html] view plaincopyprint?
<?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代码
[java] view plaincopyprint?
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集合封装的对象







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 plaincopyprint?
<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>  

获取单个值
[javascript] view plaincopyprint?
$(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对象
[javascript] view plaincopyprint?
$(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对象
[javascript] view plaincopyprint?
$(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对象
[javascript] view plaincopyprint?
$(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值
[javascript] view plaincopyprint?
$(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值
[javascript] view plaincopyprint?
$(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>");  
                });  
            }  
        });  
     });  
});