文章目录
一、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
扫一扫
1057
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
