首页 > 代码库 > JQuery+Json

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:

 

[java] view plaincopyprint?
  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:

 

 

[html] view plaincopyprint?
  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=http://www.mamicode.com/"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="http://www.mamicode.com/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:

 

 

[html] view plaincopyprint?
  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=http://www.mamicode.com/"<%=path %>/js/jquery.js"></script>  
  18.     <script type="text/javascript" src=http://www.mamicode.com/"<%=path %>/js/json.js"></script>  
  19.   </head>  
  20.     
  21.   <body>  
  22.     <input id="getJsData" type="button" value=http://www.mamicode.com/"获取js值"/>    
  23.     <input id="getMessage" type="button" value=http://www.mamicode.com/"获取单个值"/>    
  24.     <input id="getUserInfo" type="button" value=http://www.mamicode.com/"获取UserInfo对象"/>    
  25.     <input id="getList" type="button" value=http://www.mamicode.com/"获取List对象"/>    
  26.     <input id="getMap" type="button" value=http://www.mamicode.com/"获取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=http://www.mamicode.com/"注册"/>  
  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="http://www.mamicode.com//js/jquery.js"></script>	<script type="text/javascript" src="http://www.mamicode.com//js/json.js"></script>  </head>    <body>    <input id="getJsData" type="button" value="http://www.mamicode.com/获取js值"/>      <input id="getMessage" type="button" value="http://www.mamicode.com/获取单个值"/>      <input id="getUserInfo" type="button" value="http://www.mamicode.com/获取UserInfo对象"/>      <input id="getList" type="button" value="http://www.mamicode.com/获取List对象"/>      <input id="getMap" type="button" value="http://www.mamicode.com/获取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="http://www.mamicode.com/注册"/>    </form>    <s:debug/>  </body></html>

 

 

最后为上面的Jsp中的按钮事件注册单击事件,这里把这些事件代码单独的放到一个json.js文件里。

 

[javascript] view plaincopyprint?
  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. });