struts jquery 整合

简介: 引用:http://www.2cto.com/kf/201111/112000.html 结合使用jQuery和Json的话感觉不错,操作上来说很方便,先简单说说Json的一些优点,当然Json不仅仅这些优点。

引用: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>") 

            } 

        }); 

    }); 

}); 

相关文章
|
网络协议 Oracle 关系型数据库
共享模式 &amp; 专有模式
一、简介 概念 专有连接:用一个服务器进程响应一个客户端请求 共享连接:在共享服务器模式下,客户端通过监听连接到dispatcher之后,dispatcher会随机分配一个端口,此时客户端断开和监听的连接,通过分配的端口和dispatcher连接。
1640 0
|
C语言
【C 语言经典100例】C 练习实例40
【C 语言经典100例】C 练习实例40
109 0
|
存储 缓存 文件存储
如何保证分布式文件系统的数据一致性
分布式文件系统需要向上层应用提供透明的客户端缓存,从而缓解网络延时现象,更好地支持客户端性能水平扩展,同时也降低对文件服务器的访问压力。当考虑客户端缓存的时候,由于在客户端上引入了多个本地数据副本(Replica),就相应地需要提供客户端对数据访问的全局数据一致性。
32686 78
如何保证分布式文件系统的数据一致性
|
前端开发 容器
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第8章FlexBox布局(上)
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第8章FlexBox布局
17736 19
|
设计模式 存储 监控
设计模式(C++版)
看懂UML类图和时序图30分钟学会UML类图设计原则单一职责原则定义:单一职责原则,所谓职责是指类变化的原因。如果一个类有多于一个的动机被改变,那么这个类就具有多于一个的职责。而单一职责原则就是指一个类或者模块应该有且只有一个改变的原因。bad case:IPhone类承担了协议管理(Dial、HangUp)、数据传送(Chat)。good case:里式替换原则定义:里氏代换原则(Liskov 
36674 19
设计模式(C++版)
|
存储 编译器 C语言
抽丝剥茧C语言(初阶 下)(下)
抽丝剥茧C语言(初阶 下)
|
机器学习/深度学习 人工智能 自然语言处理
带你简单了解Chatgpt背后的秘密:大语言模型所需要条件(数据算法算力)以及其当前阶段的缺点局限性
带你简单了解Chatgpt背后的秘密:大语言模型所需要条件(数据算法算力)以及其当前阶段的缺点局限性
24749 14
|
机器学习/深度学习 弹性计算 监控
重生之---我测阿里云U1实例(通用算力型)
阿里云产品全线降价的一力作,2023年4月阿里云推出新款通用算力型ECS云服务器Universal实例,该款服务器的真实表现如何?让我先测为敬!
36657 15
重生之---我测阿里云U1实例(通用算力型)

热门文章

最新文章

下一篇
开通oss服务