Struts2 前端與后台之間傳值問題

老是被前端與后台之間的傳值給弄糊塗了，特此寫一篇blog進行總結。

一. 前端向后台傳值

（1）屬性驅動

屬性驅動是指在Action類里，包含表單里對應的字段（字段名稱一樣），同時設置對應的getter和setter。

表單代碼：html

<form action="login" method="post">
  <label>username:</label>
  <input type="text" name="username">
  <label>password:</label>
  <input type="text" name="username">
</form>

對應的Action：LoginAction

java代碼：

public LoginAction extends ActionSupport{
    private String username; //對應表單中input屬性name=username
    private String password; //對應表單中input屬性name=password

    /*--  getter and setter --*/
    public void setUsername(String username){
        this.username = username;
    }
    public String getUsername(){
        return this.username;
    }
    public void setPassword(String password){
        this.password = password;
    }
    public String getPassword(){
        return this.password;
    }
    public String execute(){
        return SUCCESS;
    }
}

在struts.xml中配置Action

<action name="login" class="com.bigdata.action.LoginAction">
    <result name="success">success.jsp</result>
</action>

在success.jsp頁面中使用{username}來訪問username屬性。

屬性驅動適合於表單域傳值較少的情況，如果表單域過多的話，Java代碼將會充斥着大量的getter和setter代碼。

（2）對象驅動

對象驅動是指在Action里包含一個對象，而這個對象的屬性與表單域一一對應。

對應的Action：LoginAction

public LoginAction extends ActionSupport{
    private User user;

    /*--  getter and setter --*/
    public void setUser(User user){
        this.user = user;
    }
    public User getUser(){
        return this.user;
    }
    public String execute(){
        return SUCCESS;
    }
}

對應的user類：

public Class User{
    private String username;
    private String password;

    public String getPassword() {
        return password;
    }
    public void setPassword(String password) {
        this.password = password;
    }

    public String getUsername(){
        return username;
    }
    public void setUsername(String username){
        this.username = username;
    }
}

前台html頁面代碼

<form action="login" method="post">
  <label>username:</label>
  <input type="text" name="user.username">
  <label>password:</label>
  <input type="text" name="user.password">
</form>

表單域的name由對象名和屬性名組成，中間用.連接，Action對象被創建后，通過setter進行賦值。Action result頁面則通過${user.username}來訪問。

二. 后台向前端傳值

（1）使用Struts2的標簽

對應Action：

public Class CollectAction extends ActionSupport{
    private String [] arryStr;
    //遍歷list
    private List<User> list;
    private Map<String,String> map;
    private Map<Integer,User> userMap;
    private Map<String,List<User>> userListMap;

    public void setArryStr(String[] arryStr){
        this.arryStr = arryStr;
    }
    public String[] getArryStr(){
        return arryStr;
    }

    //省略其他的getter與setter
    public String execute(){

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

        list.add(new User("wbl","123"));
        list.add(new User("avd","ggg"));
        list.add(new User("eee","iii"));

        map.put("key1","value1");
        map.put("key2","value2");
        map.put("key3","value3");

        userMap.put(1,new User("wbl","123"));
        userMap.put(2,new User("avd","ggg"));

        userListMap.put("user",list);
    }
}

Action對應的JSP頁面：

<div id="arryStr">
    <!-- iterator遍歷String 字符數組 -->
    <s:iterator value="arryStr" id="arryValue">
        <span><s:property value="arryValue" /></span>
    </s:iterator>
  </div>

  <div id="list">
    <!-- iterator遍歷List集合 -->
    <table>
      <s:iterator value="list" id="user">
        <tr>
          <td><s:property value="username" /></td>
          <td><s:property value="password" /></td>
        </tr>
      </s:iterator>
    </table>
  </div>

  <div id="map">
    <!-- iterator遍歷Map中的String字符串 -->
    <s:iterator value="map" id="column">
      <tr>
        <td>Key:<s:property value="key" /></td>
        <td>Value:<s:property value="value" /></td>
      </tr>
    </s:iterator>
  </div>

  <div id="userMap">
    <!-- iterator遍歷Map中的User 對象(Object) -->
    <s:iterator value="userMap" id="column">
        <tr>
            <td><s:property value="value.username"/></td>
            <td><s:property value="value.password"/></td>
        </tr>
      </s:iterator>
  </div>

  <div id="userlistMap">
    <!-- iterator遍歷Map中的List集合 -->
    <s:iterator value="userListMap" id="column">
      <s:set var="total" name="total" value="#column.value.size"/>
        <s:iterator value="#column.value" id="col" status="st">
          <tr>
              <td><s:property value="username"/></td>
              <td><s:property value="password"/></td>
          </tr>
      </s:iterator>
    </s:iterator>
  </div>

（2）AJAX

ajax方式可以實現異步更新數據，這里我采用json格式傳輸數據。

首先，建立一個action：

public class ajaxAction extends ActionSupport{
    private JSONObject dataObj; //向前台傳遞的JSON數據

    public JSONObject getDataObj() {
        return dataObj;
    }

    public void setDataObj(JSONObject dataObj) {
        this.dataObj = dataObj;
    }

    public String execute(){
        dataObj = new JSONObject();
        dataObj.put("key","value");
        dataObj.put("result","SUCCESS");
        return SUCCESS;
    }
}

struts.xml中action的配置

<action name="ajax"  class="com.bigdata.action.ajaxAction">
    <result type="json">
         <param name="root">dataObj</param>
         <param name="callbackParameter">jsoncallback</param>
    </result>
</action>

如果為某個action指定了一個類型為json的Result，則該Result無須映射到任何視圖資源，因為json插件會負責將Action里的狀態信息序列化成JSON格式的字符串，並將該字符串返回給客戶端瀏覽器。

json類型的Result允許指定的參數

root：設置該參數將不再把整個Action對象序列化成JSON字符串，而只是將該參數所指定的Action的屬性序列化成JSON字符串返給客戶端，本例中將會把dataObj進行序列化。

callbackParameter: 配置該參數之后，才能進行JSON的跨域傳輸。

前端利用jQuery完成AJAX交互

<div id="ajaxTest">
      <input type="button" value="test" id="show">
  </div>
</body>
<script type="text/javascript" src="js/jquery.js"></script>  
   
   
   
            <script>
   
   
   
              $(function(){
   
   
   
                  $("show").click(function(){
   
   
   
                      $.getJSON(
   
   
   
                        /*訪問Action的URL地址*/
   
   
   
                        "http://localhost:8080/bigData/ajax?jsoncallback=?",
   
   
   
                        /*得到服務器響應之后的操作*/
   
   
   
                        function(respose){
   
   
   
                            if(respose.result == "SUCCESS")
   
   
   
                                $("#ajaxTest").append("<span>SUCCESS</span>");
   
   
   
                        })
   
   
   
                  })
   
   
   
              })
   
   
   
           </script>
</html>

function中的參數response對應Action中的dataObj，此時就可以獲得由后端傳入的值。