实战Struts2+JQuery+Json实例

下面是一个简单的例子,大家可以参考一下,主要功能有: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>")

            }

        });

    });

});

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值