Struts2+JQuery+Json实例

jopen 8年前

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