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,此时就可以获得由后端传入的值。

posted @ 2015-06-17 20:41  bloodHunter  阅读(5432)  评论(0编辑  收藏  举报