• 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>") 

                } 

            }); 

        }); 

    }); 

  • 相关阅读:
    Lookup 组件用法全解
    将字符串转换成表
    处于同一域中的两台SQL Server 实例无法连接
    在SSIS中的不同组件间使用局部临时表
    SSIS的CheckPoint用法
    控制流如何处理错误
    SSIS 对数据排序
    SSIS 数据输出列因为字符截断而失败
    SQL Server 的本地时间和UTC时间
    TSQL Merge 用法
  • 原文地址:https://www.cnblogs.com/sode/p/2695863.html
Copyright © 2020-2023  润新知