Struts2 前端与后台之间传值问题

老是被前端与后台之间的传值给弄糊涂了，特此写一篇blog进行总结。

一. 前端向后台传值

（1）属性驱动

属性驱动是指在Action类里，包含表单里对应的字段（字段名称一样），同时设置对应的getter和setter。

表单代码：html

   1: <form action="login" method="post">

   2:   <label>username:</label>

   3:   <input type="text" name="username">

   4:   <label>password:</label>

   5:   <input type="text" name="username">

   6: </form>

对应的Action：LoginAction

java代码：

   1: public LoginAction extends ActionSupport{

   2:     private String username; //对应表单中input属性name=username

   3:     private String password; //对应表单中input属性name=password

   4:  

   5:     /*--  getter and setter --*/

   6:     public void setUsername(String username){

   7:         this.username = username;

   8:     }

   9:     public String getUsername(){

  10:         return this.username;

  11:     }

  12:     public void setPassword(String password){

  13:         this.password = password;

  14:     }

  15:     public String getPassword(){

  16:         return this.password;

  17:     }

  18:     public String execute(){

  19:         return SUCCESS;

  20:     }

  21: }

在struts.xml中配置Action

   1: <action name="login" class="com.bigdata.action.LoginAction">

   2:     <result name="success">success.jsp</result>

   3: </action>

在success.jsp页面中使用{username}来访问username属性。

属性驱动适合于表单域传值较少的情况，如果表单域过多的话，Java代码将会充斥着大量的getter和setter代码。

（2）对象驱动

对象驱动是指在Action里包含一个对象，而这个对象的属性与表单域一一对应。

对应的Action：LoginAction

   1: public LoginAction extends ActionSupport{

   2:     private User user;

   3:  

   4:     /*--  getter and setter --*/

   5:     public void setUser(User user){

   6:         this.user = user;

   7:     }

   8:     public User getUser(){

   9:         return this.user;

  10:     }

  11:     public String execute(){

  12:         return SUCCESS;

  13:     }

  14: }

对应的user类：

   1: public Class User{

   2:     private String username;

   3:     private String password;

   4:  

   5:     public String getPassword() {

   6:         return password;

   7:     }

   8:     public void setPassword(String password) {

   9:         this.password = password;

  10:     }

  11:  

  12:     public String getUsername(){

  13:         return username;

  14:     }

  15:     public void setUsername(String username){

  16:         this.username = username;

  17:     }

  18: }

前台html页面代码

   1: <form action="login" method="post">

   2:   <label>username:</label>

   3:   <input type="text" name="user.username">

   4:   <label>password:</label>

   5:   <input type="text" name="user.password">

   6: </form>

表单域的name由对象名和属性名组成，中间用.连接，Action对象被创建后，通过setter进行赋值。Action result页面则通过${user.username}来访问。

二. 后台向前端传值

（1）使用Struts2的标签

对应Action：

   1: public Class CollectAction extends ActionSupport{

   2:     private String [] arryStr;  

   3:     //遍历list  

   4:     private List<User> list;  

   5:     private Map<String,String> map;  

   6:     private Map<Integer,User> userMap;    

   7:     private Map<String,List<User>> userListMap; 

   8:  

   9:     public void setArryStr(String[] arryStr){

  10:         this.arryStr = arryStr;

  11:     }

  12:     public String[] getArryStr(){

  13:         return arryStr;

  14:     }

  15:  

  16:     //省略其他的getter与setter

  17:     public String execute(){

  18:  

  19:         arryStr[] = new String[]{"wbl","sdfsdf","gfg"};

  20:  

  21:         list.add(new User("wbl","123"));

  22:         list.add(new User("avd","ggg"));

  23:         list.add(new User("eee","iii"));

  24:  

  25:         map.put("key1","value1");

  26:         map.put("key2","value2");

  27:         map.put("key3","value3");

  28:  

  29:         userMap.put(1,new User("wbl","123"));

  30:         userMap.put(2,new User("avd","ggg"));

  31:  

  32:         userListMap.put("user",list);

  33:     }

  34: }

Action对应的JSP页面：

   1: <div id="arryStr">

   2:     <!-- iterator遍历String 字符数组 -->

   3:     <s:iterator value="arryStr" id="arryValue">

   4:         <span><s:property value="arryValue" /></span>

   5:     </s:iterator>

   6:   </div>

   7:  

   8:   <div id="list">

   9:     <!-- iterator遍历List集合 -->

  10:     <table>

  11:       <s:iterator value="list" id="user">

  12:         <tr>

  13:           <td><s:property value="username" /></td>

  14:           <td><s:property value="password" /></td>

  15:         </tr>

  16:       </s:iterator>

  17:     </table>

  18:   </div>

  19:  

  20:   <div id="map">

  21:     <!-- iterator遍历Map中的String字符串 -->

  22:     <s:iterator value="map" id="column">

  23:       <tr>

  24:         <td>Key:<s:property value="key" /></td>

  25:         <td>Value:<s:property value="value" /></td>

  26:       </tr>

  27:     </s:iterator>

  28:   </div>

  29:  

  30:   <div id="userMap">

  31:     <!-- iterator遍历Map中的User 对象(Object) -->

  32:     <s:iterator value="userMap" id="column">  

  33:         <tr>  

  34:             <td><s:property value="value.username"/></td>  

  35:             <td><s:property value="value.password"/></td>  

  36:         </tr>  

  37:       </s:iterator> 

  38:   </div>

  39:   

  40:   <div id="userlistMap">

  41:     <!-- iterator遍历Map中的List集合 -->

  42:     <s:iterator value="userListMap" id="column">  

  43:       <s:set var="total" name="total" value="#column.value.size"/>  

  44:         <s:iterator value="#column.value" id="col" status="st">  

  45:           <tr>  

  46:               <td><s:property value="username"/></td>  

  47:               <td><s:property value="password"/></td>  

  48:           </tr>  

  49:       </s:iterator>  

  50:     </s:iterator>  

  51:   </div>

（2）AJAX

ajax方式可以实现异步更新数据，这里我采用json格式传输数据。

首先，建立一个action：

   1: public class ajaxAction extends ActionSupport{

   2:     private JSONObject dataObj; //向前台传递的JSON数据

   3:  

   4:     public JSONObject getDataObj() {

   5:         return dataObj;

   6:     }

   7:  

   8:     public void setDataObj(JSONObject dataObj) {

   9:         this.dataObj = dataObj;

  10:     }

  11:  

  12:     public String execute(){

  13:         dataObj = new JSONObject();

  14:         dataObj.put("key","value");

  15:         dataObj.put("result","SUCCESS");

  16:         return SUCCESS;

  17:     }

  18: }

struts.xml中action的配置

   1: <action name="ajax"  class="com.bigdata.action.ajaxAction">

   2:     <result type="json">

   3:          <param name="root">dataObj</param>

   4:          <param name="callbackParameter">jsoncallback</param>

   5:     </result>

   6: </action>

如果为某个action指定了一个类型为json的Result，则该Result无须映射到任何视图资源，因为json插件会负责将Action里的状态信息序列化成JSON格式的字符串，并将该字符串返回给客户端浏览器。

json类型的Result允许指定的参数

root：设置该参数将不再把整个Action对象序列化成JSON字符串，而只是将该参数所指定的Action的属性序列化成JSON字符串返给客户端，本例中将会把dataObj进行序列化。

callbackParameter: 配置该参数之后，才能进行JSON的跨域传输。

前端利用jQuery完成AJAX交互

   1: <div id="ajaxTest">

   2:       <input type="button" value="test" id="show">

   3:   </div>

   4: </body>

   5: <script type="text/javascript" src="js/jquery.js"></script>
   1:  

   2: <script>

   3:   $(function(){

   4:       $("show").click(function(){

   5:           $.getJSON(

   6:             /*访问Action的URL地址*/

   7:             "http://localhost:8080/bigData/ajax?jsoncallback=?",

   8:             /*得到服务器响应之后的操作*/

   9:             function(respose){

  10:                 if(respose.result == "SUCCESS")

  11:                     $("#ajaxTest").append("<span>SUCCESS</span>");

  12:             })

  13:       })

  14:   })
</script>

   6: </html>

function中的参数response对应Action中的dataObj，此时就可以获得由后端传入的值。