`
123629996
  • 浏览: 294384 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

jQuery对后台json的解析

阅读更多

一个简单的例子,实现了jQuery对后台的json数据进行解析。

页面由jQuery发送一个Ajax请求,后台的servlet通过使用json的组件构造成json数据返回页面。页面进行解析显示。

前端代码:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<title>json数据练习</title>
</head>
<body>
<center>
	<strong>页面使用jQuery库发生Ajax请求,将服务器端返回的json数据显示出来</strong><br>
	<span>以下是服务器端返回的json数据</span>
	<hr>
	<table id="tab" border="1">
		<tr>
			<td>名称</td>
			<td>地址</td>
			<td>Email</td>
		</tr>
	</table>
</center>
	<script type="text/javascript">
		jQuery(document).ready(function(){
			jQuery("#tab").hide();
			jQuery.post(
				"jsonServlet",
				function(json){
					for(var i = 0; i < json.test.length;i++){
						jQuery("#tab").append("<tr><td>"+json.test[i].name+"</td><td>"+json.test[i].address+"</td><td>"+json.test[i].email+"</td></tr>");
					}
					jQuery("#tab").show();
				},
				"json"
			);
		});
	</script>
</body>
</html>

 后台处理代码

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setCharacterEncoding("UTF-8");
		PrintWriter out = response.getWriter();
		List<UserBean> users = new ArrayList<UserBean>();
		UserBean userBean1 = new UserBean();
		userBean1.setName("张三");
		userBean1.setAddress("陕西西安");
		userBean1.setEmail("zhangsan@163.com");
		users.add(userBean1);
		
		UserBean userBean2 = new UserBean();
		userBean2.setName("李四");
		userBean2.setAddress("山西太原");
		userBean2.setEmail("lis@163.com");
		users.add(userBean2);
		
		UserBean userBean3 = new UserBean();
		userBean3.setName("王五");
		userBean3.setAddress("甘肃兰州");
		userBean3.setEmail("wangwu@163.com");
		users.add(userBean3);
		
		JSONObject jsonObj = new JSONObject();
		try {
			jsonObj.put("test", users);
		} catch (JSONException e) {
			e.printStackTrace();
		}
		String jsonStr = jsonObj.toString();
		out.print(jsonStr);
	}

 

再有就是一个JavaBean,就不展示了,后台代码中用到的JSONObject对象是导入的外部包。在附件中的源代码中有。

分享到:
评论

相关推荐

    jQuery中ajax请求后台返回json数据并渲染HTML的方法

    本文介绍了如何在jQuery中通过AJAX请求从后台获取JSON格式的数据,并将这些数据动态地渲染到HTML中去。具体的知识点可以分为以下几个方面: 1. jQuery的AJAX方法:在文章中,通过使用jQuery提供的$.ajax()方法来...

    Jquery解析json数据详解

    最近被jquery折磨了一番,倒腾了一个jquery解析json的demo,本demo想实现从asp.net后台实例化dataSet或者dataTable数据集,将dataSet转换成json并返回给客户端,客户端用jquery getJson方法解析出来并显示在页面上。...

    html+jquery通过传递json访问后台控制层

    后台控制层(通常在Java、ASP.NET或其他后端框架中实现)接收到这个JSON请求后,会解析其中的数据并执行相应的业务逻辑。完成后,它将返回一个JSON响应,可能包含处理结果或者进一步的数据。前端的`success`回调函数...

    Jquery ajax json 总结

    在客户端,接收到 JSON 数据后,JQuery AJAX 的回调函数可以解析并处理这些数据。对于 JSON 对象,可以使用 `eval()` 或 `JSON.parse()`(推荐)将其转换为 JavaScript 对象,然后通过点号或方括号语法访问其属性。...

    jquery json 调用后台 案例

    在本文中,我们将深入探讨如何使用jQuery和JSON技术与ASP.NET后台进行交互,结合实际案例进行解析。jQuery是一个轻量级、高性能的JavaScript库,它极大地简化了DOM操作、事件处理、动画效果以及Ajax交互。而JSON...

    Jquery dataTable后台获取数据示例

    **jQuery DataTables 后台获取数据详解** jQuery DataTables 是一款功能强大的JavaScript库,用于将HTML表格转换为具有高级功能的数据展示工具,如分页、排序、搜索等。结合Struts、Spring和Ibatis框架,我们可以...

    简单的SSH+JQuery+JSON例子

    这样一个例子展示了如何利用SSH处理后台业务逻辑,使用JQuery进行前端交互,并通过JSON进行数据交换,形成一个完整的Web应用程序流程。理解并熟练掌握这些技术对于Java Web开发者来说至关重要。

    Servlet利用Ajax,JQuery交互Json

    JQuery的Ajax回调函数接收到响应后,解析Json数据,并根据需要更新页面的相应部分,而无需整体刷新。 总结来说,Servlet利用Ajax和JQuery实现了无刷新的交互体验,Json作为数据交换格式,使得前后端的数据传输变得...

    jQuery+json+servlet 动态取后台数据

    标题“jQuery+json+servlet 动态取后台数据”揭示了一个常见的Web开发场景,其中前端JavaScript库jQuery被用来从后端服务器(通过servlet)获取动态数据,这些数据以JSON(JavaScript Object Notation)格式传输。...

    jquery与java交互通过json传递数据的经典实例

    在Web开发中,jQuery、AJAX、Java以及JSON是四个非常关键的技术,它们共同构建了前端与后端高效通信的基础。本实例将详细介绍如何利用jQuery与Java通过JSON进行数据交互,帮助开发者理解并掌握这一重要技能。 ...

    AJAX+JQuery+JSON的综合例子

    3. **JSON**:JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。它基于JavaScript的一个子集,常用于前后端数据传输。 接下来,我们将详细解释这个...

    jquery+webservice前后台交互,返回值json

    总结来说,"jquery+webservice前后台交互,返回值json"这个示例展示了如何利用`jQuery`的`AJAX`功能与`WebService`进行数据交换,通过JSON格式传输数据,实现了高效、灵活的前后端通信。这在现代Web应用开发中是非常...

    一个页面实现Ajax效果的增删改查-JQuery+Json版

    **JSON(JavaScript Object Notation)** 是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。在本项目中,服务器响应的数据以JSON格式返回,这是因为JSON与JavaScript语法高度兼容,可以...

    Jquery解析JSON和XML示例

    本文将详细讲解如何使用jQuery解析JSON和XML数据,通过给出的文件名称,我们可以推测这是一个关于Web应用中添加账户和应用的场景。 首先,让我们来看看JSON(JavaScript Object Notation)和XML(eXtensible Markup...

    json数据jquery异步示例

    6. **后台解析JSON**: 服务器端(可能是PHP, Node.js, Java等)接收到JSON数据后,需要解析成相应的数据结构。例如,在Node.js中可以使用`JSON.parse()`,在PHP中使用`json_decode()`。 7. **新增行和删除行**: 在...

    ajax_struts_jquery_json级联菜单

    当服务器返回JSON数据后,jQuery解析这个JSON字符串,将其转换为JavaScript对象。然后,它遍历这些对象,动态地向HTML DOM(文档对象模型)添加新的选项,以构建级联菜单的子级部分。jQuery提供了丰富的DOM操作API,...

    jQuery向后台传入json格式数据的方法

    通过实例的分析,我们可以看到,要实现jQuery向后台传入JSON格式数据并不复杂,关键在于对数据序列化的理解和正确的设置AJAX请求配置。这样,我们就可以更有效地利用JSON进行前后端数据交互,提高数据处理效率,同时...

    jquery与json和ajax的结合

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。JSON格式支持以下几种类型的数据结构:对象、数组、字符串、数字、布尔值以及null。 ##### 2.3 AJAX...

    jquery json 增删改查

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

Global site tag (gtag.js) - Google Analytics