Ajax请求json
将JSON数据显示到页面
发送异步请求，取得json数据，服务器端将json数据返回给js的回调函数之后，可以在回调函数中输出，但是最终目的不是仅仅将数据输出，而是要将这些json数据显示到页面，此时就需要借助js对dom的操作功能将数据生成到HTML页面了
查询一个雇员信息
emp.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="login.js"></script>
</head>
<body>
<a href="javascript:void(0)">取得一个雇员的信息</a>
<a href="javascript:void(0)">取得所有雇员的信息</a>
<br><br/>
<table border="1">
<tr>
<td>编号</td><td>姓名</td><td>职位</td><td>薪资</td><td>领导编号</td>
<td>入职日期</td><td>佣金</td><td>部门编号</td>
</tr>
</table>
</body>
</html>
login.js
//为超链接绑定事件，点击之后会发送请求
$(function(){
$("a:first").click(function(){
$("tr:gt(0)").remove();
//发送请求
$.ajax({
type:"get",
url:"emp/get",
data:"id=7788",
dataType:"json", //表示可以跨域访问json数据
async:false, //锁定浏览器，只有请求处理完毕之后（回调函数调用完成之后），才能执行后面的代码
success:function(data){
//将数据添加到表格中
$("table").append("<tr>" +
"<td>" + data.empno + "</td>" +
"<td>" + data.ename + "</td>" +
"<td>" + data.job + "</td>" +
"<td>" + data.sal + "</td>" +
"<td>" + data.hiredate + "</td>" +
"<td>" + data.mgr + "</td>" +
"<td>" + data.comm + "</td>" +
"<td>" + data.deptno + "</td>" +
"<td><button>删除</button></td>" +
"</tr>");
}
})
})
})
public void getEmpById(HttpServletRequest req, HttpServletResponse resp) {
//取得业务层实现类对象
IEmpService service = new EmpServiceImpl();
//取得要查询的雇员的编号
Integer empno = Integer.parseInt(req.getParameter("id"));
//将查询到的数据对象转换成JSON数据
String json = JSON.toJSONString(service.findEmpById(empno));
//将JSON数据直接输出给客户端（而不是将数据保存到request内置对象，跳转到JSP，使用EL表达式输出）
PrintWriter out = null;
try {
out = resp.getWriter();
out.print(json);
} catch (Exception e) {
e.printStackTrace();
}
out.close();
}
取得List集合数据
修改业务层代码
@Override
public Map<String, Object> findAllSplit(String kw, Integer cp, Integer ls) {
Map<String, Object> map = new HashMap<String, Object>();
try {
/*将list集合中的雇员按照职位进行分组，以键值对的形式保存到map集合中，
key是职位名称，value是该职位下所有雇员的List集合 */
List<Emp> list = this.empDAO.selectSplitAll(kw, cp, ls);
//调用分组的方法
//this.groupByJob(list, map);
map.put("list", list);
//统计数据量
//map.put("count", this.empDAO.selectCount(kw));
} catch (Exception e) {
e.printStackTrace();
}finally {
C3P0Util.close(conn);
}
return map;
}
定义Servlet中的代码
public void getEmpList(HttpServletRequest req, HttpServletResponse resp) {
IEmpService service = new EmpServiceImpl();
PrintWriter out = null;
try {
out=resp.getWriter();
//将list集合转换成JSON输出
out.println(JSON.toJSONString(service.findAllSplit("", 1, 100).get("list")));
out.close();
} catch (Exception e) {
e.printStackTrace();
}
}
定义js中的代码
$(function(){
$("a:last").click(function(){
$("tr:gt(0)").remove();
//发送请求
$.ajax({
type:"get",
url:"emp/emp",
dataType:"json", //表示可以跨域访问json数据
async:false, //锁定浏览器，只有请求处理完毕之后（回调函数调用完成之后），才能执行后面的代码
success:function(data){
$.each(data,function(index){//data是要迭代的集合，index是索引
//将数据添加到表格中
$("table").append("<tr>" +
"<td>" + data[index].empno + "</td>" +
"<td>" + data[index].ename + "</td>" +
"<td>" + data[index].job + "</td>" +
"<td>" + data[index].sal + "</td>" +
"<td>" + data[index].hiredate + "</td>" +
"<td>" + data[index].mgr + "</td>" +
"<td>" + data[index].comm + "</td>" +
"<td>" + data[index].deptno + "</td>" +
"<td><button>删除</button></td>" +
"</tr>");
})
}
})
})
})
使用for循环遍历
for(var index=0;index<data.length;index++){//data是要迭代的集合，index是索引
//将数据添加到表格中
$("table").append("<tr>" +
"<td>" + data[index].empno + "</td>" +
"<td>" + data[index].ename + "</td>" +
"<td>" + data[index].job + "</td>" +
"<td>" + data[index].sal + "</td>" +
"<td>" + data[index].hiredate + "</td>" +
"<td>" + data[index].mgr + "</td>" +
"<td>" + data[index].comm + "</td>" +
"<td>" + data[index].deptno + "</td>" +
"<td><button>删除</button></td>" +
"</tr>");
}
异步请求Map集合数据
修改业务层代码：
public Map<String, Object> findAllSplit(String kw, Integer cp, Integer ls) {
Map<String, Object> map = new HashMap<String, Object>();
try {
/*将list集合中的雇员按照职位进行分组，以键值对的形式保存到map集合中，
key是职位名称，value是该职位下所有雇员的List集合 */
List<Emp> list = this.empDAO.selectSplitAll(kw, cp, ls);
//调用分组的方法
this.groupByJob(list, map);
//map.put("list", list);
} catch (Exception e) {
e.printStackTrace();
}finally {
C3P0Util.close(conn);
}
return map;
}
定义servlet中的代码：
public void getEmpList(HttpServletRequest req, HttpServletResponse resp) {
IEmpService service = new EmpServiceImpl();
PrintWriter out = null;
try {
out=resp.getWriter();
//将list集合转换成JSON输出
out.println(JSON.toJSONString(service.findAllSplit("", 1, 100)));
out.close();
} catch (Exception e) {
e.printStackTrace();
}
}
emp.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<base href="/ServletProject/">
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/login.js"></script>
</head>
<body>
<a href="javascript:void(0)">取得一个雇员的信息</a>
<a href="javascript:void(0)">取得所有雇员的信息</a>
<div></div>
</body>
</html>
login.js
$(function(){
$("a:last").click(function(){
$("tr:gt(0)").remove();
//发送请求
$.ajax({
type:"post",
url:"emp/emp",
dataType:"json", //接收为JSON对象
//async:false, //锁定浏览器，只有请求处理完毕之后（回调函数调用完成之后），才能执行后面的代码
success:function(data){
alert(data);
//删除之前的数据再显示新的数据
$("table").remove();
$("h1").remove();
//迭代Map集合，data是要迭代的map集合
//key：每次迭代的键值对的key值就是职位名称
//value:每次迭代到的键值对的value值，就是当前职位下的所有雇员的集合
$.each(data,function(key,value){
$("div").append(
"<table id='"+key+"'border=1>"+
"<tr>"+
"<th>编号</th><th>姓名</th><th>职位</th><th>薪资</th>" +
"<th>入职日期</th><th>领导编号</th><th>佣金</th>" +
"<th>部门编号</th><th>操作</th>"+
"</tr>"+
"</table>"
);
//迭代value，value表示当前的职位下的所有的雇员的集合
//index，集合的索引
$.each(value,function(index){
var date = new Date(value[index].hiredate);
var strDate = date.getFullYear()+"-"+date.getMonth()+"-"+date.getDate();
if(value[index].comm==null){
value[index].comm="我没有佣金！";
}
if(value[index].mgr==null){
value[index].mgr="我是老板！";
}
$("#"+key).append("<tr>" +
"<td>" + value[index].empno + "</td>" +
"<td>" + value[index].ename + "</td>" +
"<td>" + value[index].job + "</td>" +
"<td>" + value[index].sal + "</td>" +
"<td>" + strDate + "</td>" +
"<td>" + value[index].mgr + "</td>" +
"<td>" + value[index].comm + "</td>" +
"<td>" + value[index].deptno + "</td>" +
"<td><button>删除</button></td>" +
"</tr>");
})
})
}
})
})
})