jQuery对后台json的解析

最新推荐文章于 2024-09-05 16:41:42 发布

lq123629996

最新推荐文章于 2024-09-05 16:41:42 发布

阅读量136

点赞数

分类专栏： web前端文章标签： jQuery json Ajax JavaScript HTML ViewUI

本文链接：https://blog.csdn.net/lq123629996/article/details/83700023

版权

web前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一个简单的例子，实现了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对象是导入的外部包。在附件中的源代码中有。

lq123629996

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery对后台json的解析

一个简单的例子，实现了jQuery对后台的json数据进行解析。页面由jQuery发送一个Ajax请求，后台的servlet通过使用json的组件构造成json数据返回页面。页面进行解析显示。前端代码：&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%...
复制链接

扫一扫

专栏目录