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

[html] view plaincopyprint?

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

[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. });

JQuery+Json,布布扣,bubuko.com

时间： 2024-10-25 05:25:14

JQuery+Json的相关文章

JQuery + JSON作为前后台数据交换格式实践

JQuery + JSON作为前后台数据交换 JQuery提供良好的异步加载接口AJAX,可以局部更新页面数据, http://api.jquery.com/category/ajax/ JSON作为一种轻量数据格式,被浏览器js引擎普遍支持,同xml格式. 使用AJAX+JSON数据格式来实现动态页面,有以下好处: 1. 松耦合, 页面HTML和数据彻底分离, 即表示层 和 数据层分开, 有利前台样式定制. 不同于以往后台脚本嵌套HTML标签,并输出数据到标签的合适位置, 来实现动态页面,表示

echart+jquery+json统计TP数据

由于工作需要,需要统计交易数据的TP50,TP90,TP95,TP99.采用的前端技术是jquery+json+echart. 一.TP定义(谷歌) Calculating TP is very simple: 1. Sort all times in ascending order: [2s, 10s, 100s, 1000s] 2. find latest item in portion you need to calculate. 2.1 For TP50 it will be ceil(

PHP JQuery Json

PHP: echo Json_encode($result); Jquery: $.get( 'process.php', {'p1':'aa','p2':'dd', 'data_type':'json'}, function(data){ var resultJson=jQuery.parseJSON(data); if(resultJson.length>0) alert(resultJson[0][AA]; alert(resultJson.A.AA); } );   PHP JQuery

Json 基于jQuery+JSON的省市联动效果

helloweba.com 作者:月光光 时间:2012-09-12 21:57 标签: jQuery  JSON  Ajax  省市联动 省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统.电商网站最为常见.开发者一般使用Ajax实现无刷新下拉联动.本文将讲述,利用jQuery插件,通过读取JSON数据,实现无刷新动态下拉省市二(三)级联动效果. 查看演示 下载源码 HTML 首先在head中载入jquery库和cityselect插件. <script type="tex

jquery JSON解析代码

jquery JSON解析说明.这里首先给出JSON字符串集,代码: var data=" { root: [ {name:'1',value:'0'}, {name:'6101',value:'西安市'}, {name:'6102',value:'铜川市'}, {name:'6103',value:'宝鸡市'}, {name:'6104',value:'咸阳市'}, {name:'6105',value:'渭南市'}, {name:'6106',value:'延安市'}, {name:'610

Sharepoint2013 webpart 使用Jquery+json数据实现的菜单。

Sharepoint2013 webpart 使用Jquery+json数据实现的菜单. 分类: sharepoint2014-11-17 14:17 215人阅读 评论(0) 收藏 举报 把代码块1 复制到txt 里单击后缀名字为js  such as xxx.js.  把此文件上传的文档库.右键--文件完全URL 在Sharepoint2013 里创建 一个webart 内容编辑器--编辑webpart --在content Link--单击浏览 把上面的URL复制进去. js文件和样式文件

Jquery+json绑定带层次下拉框（select控件）

一.实现的效果图 二.主要代码 html代码 <select id="pid" runat="server"> <option value="0" data="|0|">不选父级类</option> </select> Jquery代码 var html = ['<option value="0">不选父级模块</option>'];

struts2+jquery+json集成

以下采用struts2+jquery+json模拟一个案例.当点击提交按钮时会把输入的数据提交到后台,然后从后台获取数据在客户端显示. 效果如下: 接下来为struts2+jquery+json集成步骤: 1.新建一个web工程,导入struts2+jquery+json所需jar,如下图 目录结构图 2.创建实体类User package com.ljq.bean; import java.io.Serializable; @SuppressWarnings("serial") pu

Struts2+JQuery+JSON实现异步交互

Struts2+JQuery+JSON实现异步交互,包括从后台获得单个值.对象.List和Map数据并从前台的表达中获取值把值进行序列化通过JQuery的$.ajax({})传到后台和后台的对象进行绑定. 第一步:在MyEclipse中创建JavaWeb工厂并把Struts2 和 json的jar包添加到工程中添加完成后的工程图是: 第二步:创建后台: 1. UserInfo实体类: Userinfo实体类代码: package struts2jsonjquery.test.entity; im