JSON+AJAX

最新推荐文章于 2024-05-07 19:27:32 发布

Nancy1709

最新推荐文章于 2024-05-07 19:27:32 发布

阅读量762

点赞数

分类专栏： JavaScript+jQuery

本文链接：https://blog.csdn.net/Nancy1709/article/details/88914799

版权

JavaScript+jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

一、JSON数据格式

（一）什么JSON，及为什么要有？
1.JSON是一种数据传输格式，而不是一门语言，2001年出现，2006年在互联网业界内开始普及使用，基本上所有的编程语言都支持JSON数据格式
2.之前使用的是XML的数据传输格式标准，但是XML数据格式比较繁杂、冗长，较好的解决方案就是使用JSON数据传输格式
3.JSON主要结合Ajax（异步请求），在后端一般会将一个对象转换成JSON格式的数据之后返回给客户端，可以自己写工具转换，也可以使用第三方工具转换（gjson，fastjson）

（二）主要数据格式

1.简单json数据格式
	2.90//表示一个数字
	"Hello World"//表示一个字符串
	["smith",1001,"clerk",7788,2000.00]//json格式表示简单数组
	
2.json对象
	{//json对象
		"name":"smith",
		"age":27,
		"sex":男,
		"school":{//对象的属性也可以是对象
			"sname":"南京大学",
			"address":"南京市鼓楼区汉口路22号"
		}
	}
	
3.json对象数组	
	[//对象数组，在一个数组中保存多个对象
		{
			"title":"Java开发",
			"edition":3,
			"author":["smith","tom","henry"]
		},
		{//json对象
			"title":"php开发",
			"edition":4,
			"author":["smith","tom","henry"]//属性值是数组
		},
		{
			"title":"oracle开发",
			"edition":5,
			"author":["smith","tom","henry"]
		}
	]

4.json二维数组	
	//上面代码也可以使用二维数组保存
	[
		["Java开发",3,["smith","tom","henry"]],
		["php开发",4,["smith","tom","henry"]],
		["oracle开发",5,["smith","tom","henry"]],
	]

（三）数据转换成JSON数据DEMO

1.将一个对象转换成JSON数据

//控制层
@WebServlet(urlPatterns = { "/emp/*" })
public class EmpServlet extends BaseServlet {
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		String path = req.getPathInfo();
		if (path.equals("/getid")) {
			this.getEmpById(req, resp);
		} 
	}
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		this.doGet(req, resp);
	}
	/**
	 * 	根据ID获取Emp对象
	 * @param req
	 * @param resp
	 */
	public void getEmpById(HttpServletRequest req, HttpServletResponse resp) throws ServletException {
		IEmpService service = new EmpServiceImpl();
		Integer empno = Integer.parseInt(req.getParameter("empno"));
		String json = JSON.toJSONString(service.findEmpById(empno));
		try {
			PrintWriter out = resp.getWriter();
			out.print(json);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
}

//service层，调用的是DAO层的方法，具体看MVC层代码
public class EmpServiceImpl implements IEmpService{
	Connection conn = C3P0Util.getConnection();
	private IEmpDao empDao = new EmpDaoImpl(conn);
	@Override
	public Emp findEmpById(Integer id) {
		try {
			return empDao.selectById(id);
		} catch (SQLException e) {
			e.printStackTrace();
		}finally {
			C3P0Util.close(conn);
		}
		return null;
	}
}

运行结果：浏览器输入localhost/ServletProject/emp/getid?empno=7788
在这里插入图片描述

2.将一个List集合转换为JSON数据

//控制层
@WebServlet(urlPatterns = { "/emp/*" })
public class EmpServlet extends BaseServlet {
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		String path = req.getPathInfo();
		if (path.equals("/emps")) {
			this.getEmpList(req, resp);
		}
	}
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		this.doGet(req, resp);
	}
	/**
	 * 查询所有雇员的信息
	 * @param req
	 * @param resp
	 */
	public void getEmpList(HttpServletRequest req, HttpServletResponse resp) {
		// 获取到业务层的对象
		IEmpService service = new EmpServiceImpl();
		// 用业务层对象获取到Emp对象的集合
		Map<String, Object> map = service.findSplitAll("", 1, 100);
		String json = JSON.toJSONString(map.get("emps"));
		PrintWriter out;
		try {
			out = resp.getWriter();
			out.print(json);
			out.close();
		} catch (IOException e) {
			e.printStackTrace();
		}		
	}
}
//service层，调用的是DAO层的方法
public class EmpServiceImpl implements IEmpService{
	Connection conn = C3P0Util.getConnection();
	private IEmpDao empDao = new EmpDaoImpl(conn);
	@Override
	public Map<String,Object> findSplitAll(String kw, Integer cp, Integer ls) {
		//创建map对象，将职位存储到键，所有该职位的Emp对象的集合存储到值进行保存，
		Map<String,Object> map = new HashMap<String,Object>();
		try {
			map.put("emps", empDao.selectSplitAll(kw, cp, ls));
		} catch (SQLException e) {
			e.printStackTrace();
		}finally {
			C3P0Util.close(conn);
		}
		return map;
	}
}

运行结果：浏览器输入localhost/ServletProject/emp/emps
在这里插入图片描述

3.将Map数据转换为JSON数据

//控制层
@WebServlet(urlPatterns = { "/emp/*" })
public class EmpServlet extends BaseServlet {
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		String path = req.getPathInfo();
		if (path.equals("/job")) {
			this.getEmpsGroupByJob(req, resp);
		}
	}
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		this.doGet(req, resp);
	}
	/**
	 * 按照职位分组显示雇员的信息
	 * @param req
	 * @param resp
	 */
	public void getEmpsGroupByJob(HttpServletRequest req, HttpServletResponse resp) {
		// 获取到业务层对象
		IEmpService service = new EmpServiceImpl();
		// 之后一定要记得跳转到index.jsp观察生成的表单
		String json = JSON.toJSONString(service.findSplitAll("", 1, 100));
		PrintWriter out;
		try {
			out = resp.getWriter();
			out.print(json);
			out.close();
		} catch (IOException e) {
			e.printStackTrace();
		}
	}
}
//service层，调用的是DAO层的方法
public class EmpServiceImpl implements IEmpService{
	Connection conn = C3P0Util.getConnection();
	private IEmpDao empDao = new EmpDaoImpl(conn);
	@Override
	public Map<String,Object> findSplitAll(String kw, Integer cp, Integer ls) {
		//创建map对象，将职位存储到键，所有该职位的Emp对象的集合存储到值进行保存，
		Map<String,Object> map = new HashMap<String,Object>();
		try {
//			调用dao层方法获取到Emp对象的集合
			List<Emp> list = empDao.selectSplitAll(kw, cp, ls);
			//调用groupByJob,将要分组的Emp对象的List集合，以及将结果集合传递给该方法，利用该方法将引用的值改变
			this.groupByJob(list, map);
		} catch (SQLException e) {
			e.printStackTrace();
		}finally {
			C3P0Util.close(conn);
		}
		return map;
	}
}

运行结果：浏览器输入localhost/ServletProject/emp/job
在这里插入图片描述

二、异步请求Ajax

（一）什么是异步请求？
1.页面刷新是每次请求都会重新请求所有的资源。但是在很多时候不需要页面全部刷新，仅仅是需要页面的局部数据刷新即可，此时需要发送异步请求来实现这种局部数据刷新的要求
2.异步请求简称Ajax（Asynchronous JavaScript And XML），在之前一般使用JS发送异步请求，请求的数据一般是XML，但是现在JSON出现之后就不需要使用XML作为数据传输格式标准

（二）使用jQuery发送异步请求？？？

1.方式一???没实现

<!-- emp.jsp文件 -->
<%@ 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">
<title>Insert title here</title>
<!-- 使用jQuery一定要记得导入js文件 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
	<a href="javascript:void(0)">取得一个雇员的信息</a>
</body>
</html>

//index.js
//加载事件
$(function(){
	//为超链接绑定事件，点击之后会发送请求
	$("a").click(function(){
		//发送请求
		$.get(//发送一个get请求
			"emp/getid",//请求的地址
			{"empno":7788},//传递给服务器端的数据
			function(data){//回调函数，当请求成功之后，会自动调用该函数，data是服务器端返回给客户端的数据
				alert("服务器端返回的数据是："+data);
			},
			"json"//表示请求的数据格式是json格式,如果没有指定则会是普通的数据格式
		);
	})
})

2方式二
在这里插入图片描述

3.方式三

4.方式四

三、同源策略和跨越访问

四、Ajax将JSON数据按表格显示到页面

（一）index.js文件：

借助js对DOM的操作功能将数据生成到HTML页面

$(function(){
	$("a:eq(0)").click(function(){
		$("tr:gt(0)").remove();
		$.ajax({
			type:"get",
			url:"emp/getid",
			data:"empno=7788",
			dataType:"json",
			async:false,
			success:function(data){
				$("table").append("<tr>" +
						"<td>"+data.empno+"</td>" +
						"<td>"+data.ename+"</td>" +
						"<td>"+data.job+"</td>" +
						"<td>"+data.mgr+"</td>" +
						"<td>"+data.sal+"</td>" +
						"<td>"+data.hiredate+"</td>" +
						"<td>"+data.comm+"</td>" +
						"<td>"+data.deptno+"</td>" +
						"<td><button class='btn btn-success btn-sx'>删除</button></td>" +
						"</tr>");
			}
		})
	})

	$("a:eq(1)").click(function(){
			$("tr:gt(0)").remove();
			$.ajax({
				type:"get",
				url:"emp/emps",
				dataType:"json",
				async:false,
				success:function(data){//回调函数，请求成功则调用控制层代码，并将保存到json的值返回给data
					$.each(data,function(row){
						$("table").append(
								"<tr>" +
								"<td>"+data[row].empno+"</td>" +
								"<td>"+data[row].ename+"</td>" +
								"<td>"+data[row].job+"</td>" +
								"<td>"+data[row].mgr+"</td>" +
								"<td>"+data[row].sal+"</td>" +
								"<td>"+data[row].hiredate+"</td>" +
								"<td>"+data[row].comm+"</td>" +
								"<td>"+data[row].deptno+"</td>" +
								"<td><button class='btn btn-success btn-sx'>删除</button></td>" +
								"</tr>"	
						);
					})
				}
			})
		})
		
		$("a:eq(2)").click(function(){
			$.ajax({
				type:"get",
				url:"emp/job",//访问路径
				dataType:"json",//接收为json对象
				success:function(data){
					$("table").remove();
					$("h1").remove();
					$.each(data,function(key,value){
						$("div").append("<h1>"+key+"</h1>");
						$("div").append(
								"<table id='"+key+"' border=1>" +
									"<tr>" +
										"<td>编号</td><td>姓名</td><td>职位</td><td>领导编号</td><td>薪资</td><td>入职日期</td><td>佣金</td><td>部门编号</td><td>操作</td>" +
									"</tr>" +
								"</table>"
						);
						$.each(value,function(row){
							var date = new Date(value[row].hiredate);
							var strDate = date.getFullYear()+"-"+date.getMonth()+"-"+date.getDate();
							if(value[row].comm==0) {
								value[row].comm="";
							}
							if(value[row].mgr==0) {
								value[row].mgr="";
							}
							$("#"+key).append(
									"<tr>" +
									"<td>"+value[row].empno+"</td>" +
									"<td>"+value[row].ename+"</td>" +
									"<td>"+value[row].job+"</td>" +
									"<td>"+value[row].mgr+"</td>" +
									"<td>"+value[row].sal+"</td>" +
									"<td>"+strDate+"</td>" +
									"<td>"+value[row].comm+"</td>" +
									"<td>"+value[row].deptno+"</td>" +
									"<td><button class='btn btn-success btn-sx'>删除</button></td>" +
									"</tr>"	
							)
						})
					})
				}
			})
		})
})

（二）查询一个雇员信息

1.控制层和service层代码和一（三）第1点
2.test.jsp

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
	<a href="javascript:void(0)">取得一个雇员的信息</a>
	<a href="javascript:void(0)">取得所有雇员的信息</a>
	<a href="javascript:void(0)">按职位所有雇员的信息</a>
	<div></div>
	<br><br>
	<table border="1">
			<tr>
				<td>编号</td><td>姓名</td><td>职位</td><td>领导编号</td><td>薪资</td><td>入职日期</td><td>佣金</td><td>部门编号</td><td>操作</td>
			</tr>
	</table>
</body>
</html>

运行结果：浏览器输入localhost/ServletProject/test.jsp
在这里插入图片描述

（三）取得List集合数据

1.控制层和service层代码和一（三）第2点
2.test.jsp同上个DEMO
3.test.jsp还有另一种方法可行

$("a:eq(1)").click(function(){
			$("tr:gt(0)").remove();
			$.ajax({
				type:"get",
				url:"emp/emps",
				dataType:"json",
				async:false,
				success:function(data){//回调函数，请求成功则调用控制层代码，并将保存到json的值返回给data
			for(var row=0;row<data.length;row++){
					$("table").append(
							"<tr>" +
							"<td>"+data[row].empno+"</td>" +
							"<td>"+data[row].ename+"</td>" +
							"<td>"+data[row].job+"</td>" +
							"<td>"+data[row].mgr+"</td>" +
							"<td>"+data[row].sal+"</td>" +
							"<td>"+data[row].hiredate+"</td>" +
							"<td>"+data[row].comm+"</td>" +
							"<td>"+data[row].deptno+"</td>" +
							"<td><button class='btn btn-success btn-sx'>删除</button></td>" +
							"</tr>"	
					);
				}
			}
		})
	})

运行结果：浏览器输入localhost/ServletProject/test.jsp
在这里插入图片描述

（四）取得Map集合数据

1.控制层和service层代码和一（三）第3点
2.test.jsp同上个DEMO
运行结果：浏览器输入localhost/ServletProject/test.jsp
在这里插入图片描述

Nancy1709

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JSON+AJAX

文章目录一、JSON数据格式==（三）数据转换成JSON数据DEMO====1.将一个对象转换成JSON数据====3.将Map数据转换为JSON数据==二、异步请求Ajax==（二）使用jQuery发送异步请求？？？====三、同源策略和跨越访问====四、Ajax将JSON数据按表格显示到页面==（一）index.js文件：（二）查询一个雇员信息（三）取得List集合数据（四）取得Map集合数...
复制链接

扫一扫