一个简单的例子,实现了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中去。具体的知识点可以分为以下几个方面: 1. jQuery的AJAX方法:在文章中,通过使用jQuery提供的$.ajax()方法来...
最近被jquery折磨了一番,倒腾了一个jquery解析json的demo,本demo想实现从asp.net后台实例化dataSet或者dataTable数据集,将dataSet转换成json并返回给客户端,客户端用jquery getJson方法解析出来并显示在页面上。...
后台控制层(通常在Java、ASP.NET或其他后端框架中实现)接收到这个JSON请求后,会解析其中的数据并执行相应的业务逻辑。完成后,它将返回一个JSON响应,可能包含处理结果或者进一步的数据。前端的`success`回调函数...
在客户端,接收到 JSON 数据后,JQuery AJAX 的回调函数可以解析并处理这些数据。对于 JSON 对象,可以使用 `eval()` 或 `JSON.parse()`(推荐)将其转换为 JavaScript 对象,然后通过点号或方括号语法访问其属性。...
在本文中,我们将深入探讨如何使用jQuery和JSON技术与ASP.NET后台进行交互,结合实际案例进行解析。jQuery是一个轻量级、高性能的JavaScript库,它极大地简化了DOM操作、事件处理、动画效果以及Ajax交互。而JSON...
**jQuery DataTables 后台获取数据详解** jQuery DataTables 是一款功能强大的JavaScript库,用于将HTML表格转换为具有高级功能的数据展示工具,如分页、排序、搜索等。结合Struts、Spring和Ibatis框架,我们可以...
这样一个例子展示了如何利用SSH处理后台业务逻辑,使用JQuery进行前端交互,并通过JSON进行数据交换,形成一个完整的Web应用程序流程。理解并熟练掌握这些技术对于Java Web开发者来说至关重要。
JQuery的Ajax回调函数接收到响应后,解析Json数据,并根据需要更新页面的相应部分,而无需整体刷新。 总结来说,Servlet利用Ajax和JQuery实现了无刷新的交互体验,Json作为数据交换格式,使得前后端的数据传输变得...
标题“jQuery+json+servlet 动态取后台数据”揭示了一个常见的Web开发场景,其中前端JavaScript库jQuery被用来从后端服务器(通过servlet)获取动态数据,这些数据以JSON(JavaScript Object Notation)格式传输。...
在Web开发中,jQuery、AJAX、Java以及JSON是四个非常关键的技术,它们共同构建了前端与后端高效通信的基础。本实例将详细介绍如何利用jQuery与Java通过JSON进行数据交互,帮助开发者理解并掌握这一重要技能。 ...
3. **JSON**:JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。它基于JavaScript的一个子集,常用于前后端数据传输。 接下来,我们将详细解释这个...
总结来说,"jquery+webservice前后台交互,返回值json"这个示例展示了如何利用`jQuery`的`AJAX`功能与`WebService`进行数据交换,通过JSON格式传输数据,实现了高效、灵活的前后端通信。这在现代Web应用开发中是非常...
**JSON(JavaScript Object Notation)** 是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。在本项目中,服务器响应的数据以JSON格式返回,这是因为JSON与JavaScript语法高度兼容,可以...
本文将详细讲解如何使用jQuery解析JSON和XML数据,通过给出的文件名称,我们可以推测这是一个关于Web应用中添加账户和应用的场景。 首先,让我们来看看JSON(JavaScript Object Notation)和XML(eXtensible Markup...
6. **后台解析JSON**: 服务器端(可能是PHP, Node.js, Java等)接收到JSON数据后,需要解析成相应的数据结构。例如,在Node.js中可以使用`JSON.parse()`,在PHP中使用`json_decode()`。 7. **新增行和删除行**: 在...
当服务器返回JSON数据后,jQuery解析这个JSON字符串,将其转换为JavaScript对象。然后,它遍历这些对象,动态地向HTML DOM(文档对象模型)添加新的选项,以构建级联菜单的子级部分。jQuery提供了丰富的DOM操作API,...
通过实例的分析,我们可以看到,要实现jQuery向后台传入JSON格式数据并不复杂,关键在于对数据序列化的理解和正确的设置AJAX请求配置。这样,我们就可以更有效地利用JSON进行前后端数据交互,提高数据处理效率,同时...
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。JSON格式支持以下几种类型的数据结构:对象、数组、字符串、数字、布尔值以及null。 ##### 2.3 AJAX...
在IT行业中,jQuery、JSON以及Java的组合是构建动态Web应用程序的常见技术栈。这个"jquery json 增删改查"的项目是为了解决客户端与服务器端数据交互问题,特别是涉及到数据库操作时,如添加(Add)、删除(Delete)...