struts jquery 整合

引用:http://www.2cto.com/kf/201111/112000.html

结合使用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>") 

            } 

        }); 

    }); 

}); 

上一篇:搭建SVN服务器


下一篇:iOS开发UI篇—Quartz2D简单介绍