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

<?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集合封裝的對象

      返回結果

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資料

  <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>");});}}); });});