`

Jquery JSON操作应用

阅读更多
今天闲暇时间没事,看到群里有人询问json数据操作,然后回顾一下,做一个笔记吧!
使用JSON需要的包有:
commons-beanutils-1.7.0.jar 
commons-lang-2.1.jar
ezmorph-1.0.2.jar
json-lib-1.1-jdk15.jar

在后台把数据封装成json数据格式传到前台
1. List集合转换成json代码
List list = new ArrayList();
list.add( "first" );
list.add( "second" );
JSONArray jsonArray2 = JSONArray.fromObject( list );
2. Map集合转换成json代码
Map map = new HashMap();
map.put("name", "json");
map.put("bool", Boolean.TRUE);
map.put("int", new Integer(1));
map.put("arr", new String[] { "a", "b" });
map.put("func", "function(i){ return this.arr[i]; }");
JSONObject json = JSONObject.fromObject(map);
3. Bean转换成json代码
JSONObject jsonObject = JSONObject.fromObject(new JsonBean());
4. 数组转换成json代码
boolean[] boolArray = new boolean[] { true, false, true };
JSONArray jsonArray1 = JSONArray.fromObject(boolArray);
5. 一般数据转换成json代码
JSONArray jsonArray3 = JSONArray.fromObject("['json','is','easy']" );


[color=red]response.getWriter().write(jsonArray2.toString());[/color]

前台页面的解析:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'json.jsp' starting page</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="js/jquery-1.3.2.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
		var txt = '{"employees":[' +
			'{"firstName":"Bill","lastName":"Gates" },' +
			'{"firstName":"George","lastName":"Bush" },' +
			'{"firstName":"Thomas","lastName":"Carter" }]}';
			
		var JSONObject= {
				"name":"Bill Gates",
				"street":"Fifth Avenue New York 666",
				"age":56,
				"phone":"555 1234567"};
		var book = '{"hcz":[{"author":"hong","author1":"honglou"},{"author":"hong1","author1":"honglou1"}]}';
			$("#btn").click(function(){
				var dataObject = eval("("+txt+")");
				alert(dataObject.employees[1].firstName);
			});
			$("#btn1").click(function(){
				alert(JSONObject.name);
			});
			$("#btn2").click(function(){
				var bookObject = eval("("+book+")");
				alert(bookObject.hcz[1].author);
			});
			
		});
	</script>
	
  </head>
  
  <body>
   <input type="button" value="Button0" id="btn" />
   <input type="button" value="Button1" id="btn1" />
    <input type="button" value="Button2" id="btn2" />
  </body>
</html>

0
4
分享到:
评论

相关推荐

    Jquery.json.js

    jQuery是一个高效、简洁且易用的JavaScript库,它极大地简化了JavaScript编程,使得DOM操作、事件处理、Ajax交互等任务变得更加容易。JSON(JavaScript Object Notation)则是一种轻量级的数据交换格式,易于人阅读...

    jQuery JSON with PHP json_encode and json_decode

    至于提供的压缩文件"jquery-json-read-only",可能包含了一些只读的jQuery JSON操作示例或者相关的工具。这些资源可以帮助开发者更好地理解如何在实际项目中应用这些概念。不过,由于没有具体的内容,无法提供更详细...

    jquery json 增删改查

    在IT行业中,jQuery、JSON以及Java的组合是构建动态Web应用程序的常见技术栈。这个"jquery json 增删改查"的项目是为了解决客户端与服务器端数据交互问题,特别是涉及到数据库操作时,如添加(Add)、删除(Delete)...

    使用JQuery实现从JSON对象转换为form提交数据

    jQuery是一个强大的JavaScript库,提供了丰富的API来简化DOM操作、事件处理、动画效果以及Ajax交互。在处理表单数据时,jQuery的`serialize()`和`serializeArray()`方法尤为有用。 1. **JSON对象到表单数据的转换**...

    jquery json cookie demo

    在IT行业中,jQuery、JSON和Cookie是三种非常重要的技术元素,它们在网页开发和数据管理中扮演着关键角色。现在,我们来详细探讨一下这些概念及其在实际应用中的结合。 首先,jQuery是一个轻量级的JavaScript库,它...

    jQuery读取json数据

    在实际应用中,我们可以结合jQuery的DOM操作方法,如`.html()`, `.append()`, `.attr()`等,将接收到的JSON数据动态地展示在网页上,实现动态更新和交互。 总之,jQuery读取JSON数据不仅提高了效率,也提升了代码的...

    jQuery Json v2.6.0

    在实际应用中,jQuery JSON v2.6.0还提供了一些优化和错误处理机制。比如,对于非法的JSON格式,`$.parseJSON()`会抛出一个错误,帮助开发者识别并修复问题。同时,它也支持JSONP(JSON with Padding)格式,这是一...

    jquery_json.rar_JSON_jquery_jquery-json_jquery.json_jquery.json.

    在实际应用中,例如,当需要从服务器获取JSON数据并将其显示在网页上时,`$.ajax`或`$.getJSON`等jQuery方法可以用来发送Ajax请求。收到JSON响应后,使用`$.parseJSON`将JSON字符串解析成JavaScript对象,然后可以...

    SSH+jQuery+json 实现的Ajax操作,绝对精华,代码简练清晰,绝对能看明白

    总结来说,这个压缩包提供的示例是一个基于SSH后端、jQuery前端和JSON数据交换的Ajax级联操作实现,旨在展示如何优雅地处理Web应用中的动态数据加载。这种技术组合大大提高了用户体验,因为用户无需刷新整个页面就能...

    jquery1.7+jquery for json 2.3

    二、jQuery JSON 2.3插件的解析与应用 JSON,作为轻量级的数据交换格式,广泛用于前后端的数据传输。jQuery JSON 2.3插件主要提供了两个核心功能:`jQuery.toJSON()`和`jQuery.parseJSON()`。 1. **`jQuery.toJSON...

    jQuery json省市区街道四级联动地址选择插件

    **jQuery JSON 省市区街道四级联动地址选择插件** ...开发者需要理解jQuery的基本用法、JSON数据格式,以及如何通过事件监听和DOM操作来动态更新页面内容。通过合理的CSS样式,还可以进一步提升插件的美观度和可用性。

    JQuery操作json的例子

    **jQuery 操作 JSON 的例子** 在 Web 开发中,JSON(JavaScript Object Notation)作为一种轻量级的数据交换格式,被广泛用于前后端交互。jQuery,一个流行的 JavaScript 库,提供了简单易用的 API 来处理 JSON ...

    jquery json分页实例

    **jQuery** 是一个轻量级的JavaScript库,它简化了DOM操作、事件处理、动画以及Ajax交互。jQuery的易用性和丰富的API使其成为Web开发者的首选工具之一。在本实例中,jQuery将用于处理与服务器的通信和更新页面内容。...

    jquery.jsoncookie.zip

    然而,原生的JavaScript Cookie操作并不支持直接存储复杂数据结构如JSON,这就需要像`jquery.jsoncookie`这样的工具来解决。 使用`jquery.jsoncookie.js`插件,你可以方便地将JSON对象序列化成字符串并存入Cookie,...

    jquery json 搜索与分页效果代码.rar

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和Ajax交互。JSON(JavaScript Object Notation)则是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成...

    jquery.json2xml.js和jquery.xml2json.js

    jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理和Ajax交互。在jQuery的基础上,`jquery.json2xml.js` 和 `jquery.xml2json.js` 这两个脚本提供了方便的方法来在JSON和XML之间进行转换,从而让开发者...

    Struts2JQueryJson

    总的来说,Struts2JQueryJson结合了Struts2的MVC架构、jQuery的便利性和JSON的高效数据交换,为开发人员提供了一种高效且用户体验良好的Web应用开发方式。在实际项目中,通过熟练掌握这些技术,可以创建出响应快速、...

    jQuery json创建投票系统_异步投票代码

    在IT行业中,jQuery和JSON是两个非常重要的技术概念,它们在网页开发,特别是前端交互方面起着关键作用。本文将详细解析如何利用jQuery和JSON来创建一个投票系统,并且会探讨异步投票代码的工作原理。 首先,jQuery...

    jQuery json动态数据表格分页代码

    在这个场景中,jQuery被用来处理DOM操作,如动态加载表格数据和执行分页效果。 2. **JSON(JavaScript Object Notation)**:JSON是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。在...

    JqueryJson

    通过设置`dataType: 'json'`,jQuery会自动将服务器返回的JSON数据转化为JavaScript对象,方便进一步操作。 2. **JSONP与跨域**: JSONP(JSON with Padding)是解决JavaScript跨域问题的一种方式。jQuery的`$.get...

Global site tag (gtag.js) - Google Analytics