Struts2+JQuery+Json實例

    結合使用jQuery和Json的話感覺不錯，操作上來說很方便，先簡單說說Json的一些優點，當然Json不僅僅這些優點。

1.方便前臺數據的操作。

2.數據體積小，傳輸快。

3.客戶端操縱XML的時候需要創建ActiveX對象，Json則完全就是一個JS對象，它不需要創建DOM。

下面是一個簡單的例子，大家可以參考一下，主要功能有：1.獲取js值、2.獲取單個值、3.獲取對象值、4.獲取List對象、5.獲取Map對象。

具體代碼如下：

先看看控制器Action的代碼。JsonJqueryStruts2Action.java：

package struts2jsonjquery.test.action;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import struts2jsonjquery.test.entity.UserInfo;

import com.opensymphony.xwork2.ActionSupport;

public class JsonJqueryStruts2Action extends ActionSupport {

    private static final long serialVersionUID = 3518833679938898354L;

    private String message;     //使用json返回單個值
    private UserInfo userInfo;      //使用json返回對象
    private List<UserInfo> userInfosList;     //使用josn返回List對象
    private Map<String,UserInfo> userInfosMap;    //使用json返回Map對象
    /**
     * <p>
     *  返回單個值
     * <p>
     * @return
     */
    public String returnMessage(){
        this.message = "成功返回單個值:楊金德";
        return "message";
    }
    /**
     * <p>
     *  返回UserInfo對象
     * </p>
     * @return
     */
    public String returnUserInfo(){
        userInfo = new UserInfo();
        userInfo.setUserId(10000);
        userInfo.setUserName("柳夢璃");
        userInfo.setPassword("liumengli");
        return "userInfo";
    }
    /**
     * <p>
     *  返回List對象
     * </p>
     * @return
     */
    public String returnList(){
        userInfosList = new ArrayList<UserInfo>();
        UserInfo u1 = new UserInfo();
        u1.setUserId(10000);
        u1.setUserName("柳夢璃");
        u1.setPassword("liumengli");
        UserInfo u2 = new UserInfo();
        u2.setUserId(10001);
        u2.setUserName("韓菱紗");
        u2.setPassword("hanlingsha");
        UserInfo u3 = new UserInfo();
        u3.setUserId(10002);
        u3.setUserName("云天河");
        u3.setPassword("yuntianhe");
        UserInfo u4 = new UserInfo();
        u4.setUserId(10003);
        u4.setUserName("玄霄");
        u4.setPassword("xuanxiao");
        userInfosList.add(u1);
        userInfosList.add(u2);
        userInfosList.add(u3);
        userInfosList.add(u4);
        return "list";
    }
    /**
     * <p>
     *  返回Map對象
     * </p>
     * @return
     */
    public String returnMap(){
        userInfosMap = new HashMap<String,UserInfo>();
        UserInfo u1 = new UserInfo();
        u1.setUserId(10000);
        u1.setUserName("林月如");
        u1.setPassword("linyueru");
        UserInfo u2 = new UserInfo();
        u2.setUserId(10001);
        u2.setUserName("趙靈兒");
        u2.setPassword("zhaolinger");
        UserInfo u3 = new UserInfo();
        u3.setUserId(10002);
        u3.setUserName("李逍遙");
        u3.setPassword("lixiaoyao");
        UserInfo u4 = new UserInfo();
        u4.setUserId(10003);
        u4.setUserName("女媧");
        u4.setPassword("nvwa");
        userInfosMap.put(u1.getUserId()+"", u1);
        userInfosMap.put(u2.getUserId()+"", u2);
        userInfosMap.put(u3.getUserId()+"", u3);
        userInfosMap.put(u4.getUserId()+"", u4);
        return "map";
    }
    /**
     * <p>
     *  獲得對象，也就是通過表達獲得對象(異步的)
     * </P>
     * @return
     */
    public String gainUserInfo(){
        System.out.println("用戶ID："+userInfo.getUserId());
        System.out.println("用戶名："+userInfo.getUserName());
        System.out.println("密碼："+userInfo.getPassword());
        return "userInfo";
    }
    public String getMessage() {
        return message;
    }
    public void setMessage(String message) {
        this.message = message;
    }
    public UserInfo getUserInfo() {
        return userInfo;
    }
    public void setUserInfo(UserInfo userInfo) {
        this.userInfo = userInfo;
    }
    public List<UserInfo> getUserInfosList() {
        return userInfosList;
    }
    public void setUserInfosList(List<UserInfo> userInfosList) {
        this.userInfosList = userInfosList;
    }
    public Map<String, UserInfo> getUserInfosMap() {
        return userInfosMap;
    }
    public void setUserInfosMap(Map<String, UserInfo> userInfosMap) {
        this.userInfosMap = userInfosMap;
    }
}

struts2的配置文件也很簡單，需要注意的是得把type設置為json類型。struts.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>
    <constant name="struts.custom.i18n.resources" value="UTF-8"/>
    <package name="default" namespace="/" extends="json-default">
        <action name="jsontest" class="struts2jsonjquery.test.action.JsonJqueryStruts2Action">
            <!-- 返回單個值的result -->
            <result name="message" type="json"></result>
            <!-- 返回UserInfo對象的 -->
            <result name="userInfo" type="json"></result>
            <!-- 返回List對象的 -->
            <result name="list" type="json"></result>
            <!-- 返回Map對象的 -->
            <result name="map" type="json"></result>
        </action>
    </package>
</struts>

前臺Jsp提供幾個點擊按鈕事件，當然這個Jsp需要引入jQuer.js文件。index.jsp：

<%@ page language="java" pageEncoding="GBK"%>
<%@ taglib uri="/struts-tags" prefix="s" %>
<%
    String path = request.getContextPath();
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>

    <title>Struts2+JQuery+JSON</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <script type="text/javascript" src="<%=path %>/js/jquery.js"></script>
    <script type="text/javascript" src="<%=path %>/js/json.js"></script>
  </head>

  <body>
    <input id="getJsData" type="button" value="獲取js值"/>  
    <input id="getMessage" type="button" value="獲取單個值"/>  
    <input id="getUserInfo" type="button" value="獲取UserInfo對象"/>  
    <input id="getList" type="button" value="獲取List對象"/>  
    <input id="getMap" type="button" value="獲取Map對象"/>  
    <br>
    <br>
    <br>
    <!-- 要顯示信息的層 -->
    <div id="message"></div>
    <form>
        用戶ID：<input name="userInfo.userId" type="text"/><br/>
        用戶名：<input name="userInfo.userName" type="text"/><br/>
        密   碼：<input name="userInfo.password" type="text"/><br>
        <input id="regRe" type="button" value="注冊"/>
    </form>
    <s:debug/>
  </body>
</html>

 

最后為上面的Jsp中的按鈕事件注冊單擊事件，這里把這些事件代碼單獨的放到一個json.js文件里。

//初始加載頁面時
$(document).ready(function(){
    //為獲獲取js值注冊鼠標單擊事件
    $("#getJsData").click(function(){
        $.getJSON("js/test.js",function(data){
            //通過.操作符可以從data.message中獲得Action中message的值
            $("#message").html("<font color='red'>用戶名："+data.name+"人生目標："+data.job+"</font>");
        });
    });
    //為獲取單個值的按鈕注冊鼠標單擊事件
    $("#getMessage").click(function(){
        $.getJSON("jsontest!returnMessage.action",function(data){
            //通過.操作符可以從data.message中獲得Action中message的值
            $("#message").html("<font color='red'>"+data.message+"</font>");
        });
    });
    //為獲取UserInfo對象按鈕添加鼠標單擊事件
    $("#getUserInfo").click(function(){
        $.getJSON("jsontest!returnUserInfo.action",function(data){
            //清空顯示層中的數據
            $("#message").html("");
            //為顯示層添加獲取到的數據
            //獲取對象的數據用data.userInfo.屬性
            $("#message").append("<div><font color='red'>用戶ID："+data.userInfo.userId+"</font></div>")
                         .append("<div><font color='red'>用戶名："+data.userInfo.userName+"</font></div>")
                         .append("<div><font color='red'>密碼："+data.userInfo.password+"</font></div>")
        });
    });
    //為獲取List對象按鈕添加鼠標單擊事件
    $("#getList").click(function(){
        $.getJSON("jsontest!returnList.action",function(data){
            //清空顯示層中的數據
            $("#message").html("");
            //使用jQuery中的each(data,function(){});函數
            //從data.userInfosList獲取UserInfo對象放入value之中
            $.each(data.userInfosList,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對象按鈕添加鼠標單擊事件
    $("#getMap").click(function(){
        $.getJSON("jsontest!returnMap.action",function(data){
            //清空顯示層中的數據
            $("#message").html("");
            //使用jQuery中的each(data,function(){});函數
            //從data.userInfosList獲取UserInfo對象放入value之中
            //key值為Map的鍵值
            $.each(data.userInfosMap,function(key,value){
                $("#message").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>");
            });
        });
    });
    //向服務器發送表達數據
    $("#regRe").click(function(){
        //把表單的數據進行序列化
        var params = $("form").serialize();
        //使用jQuery中的$.ajax({});Ajax方法
        $.ajax({
            url:"jsontest!gainUserInfo.action",
            type:"POST",
            data:params,
            dataType:"json",
            success:function(data){
                //清空顯示層中的數據
            $("#message").html("");
            //為顯示層添加獲取到的數據
            //獲取對象的數據用data.userInfo.屬性
            $("#message").append("<div><font color='red'>用戶ID："+data.userInfo.userId+"</font></div>")
                         .append("<div><font color='red'>用戶名："+data.userInfo.userName+"</font></div>")
                         .append("<div><font color='red'>密碼："+data.userInfo.password+"</font></div>")
            }
        });
    });
});