JQuery+Json

结合使用jQuery和Json的话感觉不错,操作上来说很方便,先简单说说Json的一些优点,当然Json不仅仅这些优点。

1.方便前台数据的操作。

2.数据体积小,传输快。

3.客户端操纵XML的时候需要创建ActiveX对象,Json则完全就是一个JS对象,它不需要创建DOM。

下面是一个简单的例子,大家可以参考一下,主要功能有:1.获取js值、2.获取单个值、3.获取对象值、4.获取List对象、5.获取Map对象。

具体代码如下:

先看看控制器Action的代码。JsonJqueryStruts2Action.java:

 

  1. package struts2jsonjquery.test.action;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.HashMap;  
  5. import java.util.List;  
  6. import java.util.Map;  
  7.   
  8. import struts2jsonjquery.test.entity.UserInfo;  
  9.   
  10. import com.opensymphony.xwork2.ActionSupport;  
  11.   
  12. public class JsonJqueryStruts2Action extends ActionSupport {  
  13.   
  14.     private static final long serialVersionUID = 3518833679938898354L;  
  15.       
  16.     private String message;     //使用json返回单个值   
  17.     private UserInfo userInfo;      //使用json返回对象   
  18.     private List<UserInfo> userInfosList;     //使用josn返回List对象   
  19.     private Map<String,UserInfo> userInfosMap;    //使用json返回Map对象   
  20.     /** 
  21.      * <p> 
  22.      *  返回单个值 
  23.      * <p> 
  24.      * @return 
  25.      */  
  26.     public String returnMessage(){  
  27.         this.message = "成功返回单个值:杨金德";  
  28.         return "message";  
  29.     }  
  30.     /** 
  31.      * <p> 
  32.      *  返回UserInfo对象 
  33.      * </p> 
  34.      * @return 
  35.      */  
  36.     public String returnUserInfo(){  
  37.         userInfo = new UserInfo();  
  38.         userInfo.setUserId(10000);  
  39.         userInfo.setUserName("柳梦璃");  
  40.         userInfo.setPassword("liumengli");  
  41.         return "userInfo";  
  42.     }  
  43.     /** 
  44.      * <p> 
  45.      *  返回List对象 
  46.      * </p> 
  47.      * @return 
  48.      */  
  49.     public String returnList(){  
  50.         userInfosList = new ArrayList<UserInfo>();  
  51.         UserInfo u1 = new UserInfo();  
  52.         u1.setUserId(10000);  
  53.         u1.setUserName("柳梦璃");  
  54.         u1.setPassword("liumengli");  
  55.         UserInfo u2 = new UserInfo();  
  56.         u2.setUserId(10001);  
  57.         u2.setUserName("韩菱纱");  
  58.         u2.setPassword("hanlingsha");  
  59.         UserInfo u3 = new UserInfo();  
  60.         u3.setUserId(10002);  
  61.         u3.setUserName("云天河");  
  62.         u3.setPassword("yuntianhe");  
  63.         UserInfo u4 = new UserInfo();  
  64.         u4.setUserId(10003);  
  65.         u4.setUserName("玄霄");  
  66.         u4.setPassword("xuanxiao");  
  67.         userInfosList.add(u1);  
  68.         userInfosList.add(u2);  
  69.         userInfosList.add(u3);  
  70.         userInfosList.add(u4);  
  71.         return "list";  
  72.     }  
  73.     /** 
  74.      * <p> 
  75.      *  返回Map对象 
  76.      * </p> 
  77.      * @return 
  78.      */  
  79.     public String returnMap(){  
  80.         userInfosMap = new HashMap<String,UserInfo>();  
  81.         UserInfo u1 = new UserInfo();  
  82.         u1.setUserId(10000);  
  83.         u1.setUserName("林月如");  
  84.         u1.setPassword("linyueru");  
  85.         UserInfo u2 = new UserInfo();  
  86.         u2.setUserId(10001);  
  87.         u2.setUserName("赵灵儿");  
  88.         u2.setPassword("zhaolinger");  
  89.         UserInfo u3 = new UserInfo();  
  90.         u3.setUserId(10002);  
  91.         u3.setUserName("李逍遥");  
  92.         u3.setPassword("lixiaoyao");  
  93.         UserInfo u4 = new UserInfo();  
  94.         u4.setUserId(10003);  
  95.         u4.setUserName("女娲");  
  96.         u4.setPassword("nvwa");  
  97.         userInfosMap.put(u1.getUserId()+"", u1);  
  98.         userInfosMap.put(u2.getUserId()+"", u2);  
  99.         userInfosMap.put(u3.getUserId()+"", u3);  
  100.         userInfosMap.put(u4.getUserId()+"", u4);  
  101.         return "map";  
  102.     }  
  103.     /** 
  104.      * <p> 
  105.      *  获得对象,也就是通过表达获得对象(异步的) 
  106.      * </P> 
  107.      * @return 
  108.      */  
  109.     public String gainUserInfo(){  
  110.         System.out.println("用户ID:"+userInfo.getUserId());  
  111.         System.out.println("用户名:"+userInfo.getUserName());  
  112.         System.out.println("密码:"+userInfo.getPassword());  
  113.         return "userInfo";  
  114.     }  
  115.     public String getMessage() {  
  116.         return message;  
  117.     }  
  118.     public void setMessage(String message) {  
  119.         this.message = message;  
  120.     }  
  121.     public UserInfo getUserInfo() {  
  122.         return userInfo;  
  123.     }  
  124.     public void setUserInfo(UserInfo userInfo) {  
  125.         this.userInfo = userInfo;  
  126.     }  
  127.     public List<UserInfo> getUserInfosList() {  
  128.         return userInfosList;  
  129.     }  
  130.     public void setUserInfosList(List<UserInfo> userInfosList) {  
  131.         this.userInfosList = userInfosList;  
  132.     }  
  133.     public Map<String, UserInfo> getUserInfosMap() {  
  134.         return userInfosMap;  
  135.     }  
  136.     public void setUserInfosMap(Map<String, UserInfo> userInfosMap) {  
  137.         this.userInfosMap = userInfosMap;  
  138.     }  
  139. }  
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:

 

 

  1. <?xml version="1.0" encoding="UTF-8" ?>  
  2. <!DOCTYPE struts PUBLIC  
  3.     "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"  
  4.     "http://struts.apache.org/dtds/struts-2.0.dtd">  
  5.   
  6. <struts>  
  7.     <constant name="struts.custom.i18n.resources" value="UTF-8"/>  
  8.     <package name="default" namespace="/" extends="json-default">  
  9.         <action name="jsontest" class="struts2jsonjquery.test.action.JsonJqueryStruts2Action">  
  10.             <!-- 返回单个值的result -->  
  11.             <result name="message" type="json"></result>  
  12.             <!-- 返回UserInfo对象的 -->  
  13.             <result name="userInfo" type="json"></result>  
  14.             <!-- 返回List对象的 -->  
  15.             <result name="list" type="json"></result>  
  16.             <!-- 返回Map对象的 -->  
  17.             <result name="map" type="json"></result>  
  18.         </action>  
  19.     </package>  
  20. </struts>  
<?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:

 

 

  1. <%@ page language="java" pageEncoding="GBK"%>  
  2. <%@ taglib uri="/struts-tags" prefix="s" %>  
  3. <%  
  4.     String path = request.getContextPath();  
  5. %>  
  6.   
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  8. <html>  
  9.   <head>  
  10.       
  11.     <title>Struts2+JQuery+JSON</title>  
  12.     <meta http-equiv="pragma" content="no-cache">  
  13.     <meta http-equiv="cache-control" content="no-cache">  
  14.     <meta http-equiv="expires" content="0">      
  15.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  16.     <meta http-equiv="description" content="This is my page">  
  17.     <script type="text/javascript" src="<%=path %>/js/jquery.js"></script>  
  18.     <script type="text/javascript" src="<%=path %>/js/json.js"></script>  
  19.   </head>  
  20.     
  21.   <body>  
  22.     <input id="getJsData" type="button" value="获取js值"/>    
  23.     <input id="getMessage" type="button" value="获取单个值"/>    
  24.     <input id="getUserInfo" type="button" value="获取UserInfo对象"/>    
  25.     <input id="getList" type="button" value="获取List对象"/>    
  26.     <input id="getMap" type="button" value="获取Map对象"/>    
  27.     <br>  
  28.     <br>  
  29.     <br>  
  30.     <!-- 要显示信息的层 -->  
  31.     <div id="message"></div>  
  32.     <form>  
  33.         用户ID:<input name="userInfo.userId" type="text"/><br/>  
  34.         用户名:<input name="userInfo.userName" type="text"/><br/>  
  35.         密   码:<input name="userInfo.password" type="text"/><br>  
  36.         <input id="regRe" type="button" value="注册"/>  
  37.     </form>  
  38.     <s:debug/>  
  39.   </body>  
  40. </html>  
<%@ 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文件里。

 

  1. //初始加载页面时   
  2. $(document).ready(function(){  
  3.     //为获获取js值注册鼠标单击事件   
  4.     $("#getJsData").click(function(){  
  5.         $.getJSON("js/test.js",function(data){  
  6.             //通过.操作符可以从data.message中获得Action中message的值   
  7.             $("#message").html("<font color=‘red‘>用户名:"+data.name+"人生目标:"+data.job+"</font>");  
  8.         });  
  9.     });  
  10.     //为获取单个值的按钮注册鼠标单击事件   
  11.     $("#getMessage").click(function(){  
  12.         $.getJSON("jsontest!returnMessage.action",function(data){  
  13.             //通过.操作符可以从data.message中获得Action中message的值   
  14.             $("#message").html("<font color=‘red‘>"+data.message+"</font>");  
  15.         });  
  16.     });  
  17.     //为获取UserInfo对象按钮添加鼠标单击事件   
  18.     $("#getUserInfo").click(function(){  
  19.         $.getJSON("jsontest!returnUserInfo.action",function(data){  
  20.             //清空显示层中的数据   
  21.             $("#message").html("");  
  22.             //为显示层添加获取到的数据   
  23.             //获取对象的数据用data.userInfo.属性   
  24.             $("#message").append("<div><font color=‘red‘>用户ID:"+data.userInfo.userId+"</font></div>")  
  25.                          .append("<div><font color=‘red‘>用户名:"+data.userInfo.userName+"</font></div>")  
  26.                          .append("<div><font color=‘red‘>密码:"+data.userInfo.password+"</font></div>")  
  27.         });  
  28.     });  
  29.     //为获取List对象按钮添加鼠标单击事件   
  30.     $("#getList").click(function(){  
  31.         $.getJSON("jsontest!returnList.action",function(data){  
  32.             //清空显示层中的数据   
  33.             $("#message").html("");  
  34.             //使用jQuery中的each(data,function(){});函数   
  35.             //从data.userInfosList获取UserInfo对象放入value之中   
  36.             $.each(data.userInfosList,function(i,value){  
  37.                 $("#message").append("<div>第"+(i+1)+"个用户:</div>")  
  38.                          .append("<div><font color=‘red‘>用户ID:"+value.userId+"</font></div>")  
  39.                          .append("<div><font color=‘red‘>用户名:"+value.userName+"</font></div>")  
  40.                          .append("<div><font color=‘red‘>密码:"+value.password+"</font></div>");  
  41.             });  
  42.         });  
  43.     });  
  44.     //为获取Map对象按钮添加鼠标单击事件   
  45.     $("#getMap").click(function(){  
  46.         $.getJSON("jsontest!returnMap.action",function(data){  
  47.             //清空显示层中的数据   
  48.             $("#message").html("");  
  49.             //使用jQuery中的each(data,function(){});函数   
  50.             //从data.userInfosList获取UserInfo对象放入value之中   
  51.             //key值为Map的键值   
  52.             $.each(data.userInfosMap,function(key,value){  
  53.                 $("#message").append("<div><font color=‘red‘>用户ID:"+value.userId+"</font></div>")  
  54.                          .append("<div><font color=‘red‘>用户名:"+value.userName+"</font></div>")  
  55.                          .append("<div><font color=‘red‘>密码:"+value.password+"</font></div>");  
  56.             });  
  57.         });  
  58.     });  
  59.     //向服务器发送表达数据   
  60.     $("#regRe").click(function(){  
  61.         //把表单的数据进行序列化   
  62.         var params = $("form").serialize();  
  63.         //使用jQuery中的$.ajax({});Ajax方法   
  64.         $.ajax({  
  65.             url:"jsontest!gainUserInfo.action",  
  66.             type:"POST",  
  67.             data:params,  
  68.             dataType:"json",  
  69.             success:function(data){  
  70.                 //清空显示层中的数据   
  71.             $("#message").html("");  
  72.             //为显示层添加获取到的数据   
  73.             //获取对象的数据用data.userInfo.属性   
  74.             $("#message").append("<div><font color=‘red‘>用户ID:"+data.userInfo.userId+"</font></div>")  
  75.                          .append("<div><font color=‘red‘>用户名:"+data.userInfo.userName+"</font></div>")  
  76.                          .append("<div><font color=‘red‘>密码:"+data.userInfo.password+"</font></div>")  
  77.             }  
  78.         });  
  79.     });  
  80. });  

JQuery+Json,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。