详细笔记的第一遍：学习ssm的整合-CRUD的第3天（2021-11-23）2
17、构建员工列表。
从首页index.jsp出发，发一个Ajax请求，拿到Msg数据，使用js进行解析， 使用DOM增删改的形式把这些数据显示在页面上。
之前：一进首页发/emps请求，进入对应的控制器方法，得到数据，进入list.jsp页面进行展示。
现在：
一进来首页，发一个ajax请求，调对应的控制器方法，得到Msg这个json字符串，js对这个json字符串进行解析，然后显示在页面上。
将原先的命名为index2.jsp
新的首页叫做index.jsp
新建一个index.jsp
2、将当时写的list.jsp页面代码全部拷贝到新的index.jsp里面去。
list.jsp:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<title>员工列表页面</title>
<%
pageContext.setAttribute("APP_PATH",request.getContextPath());
%>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<%--显示标题--%>
<div class="row">
<div class="col-md-12">
<h1>SSM_CRUD</h1>
</div>
</div>
<%--按钮--%>
<div class="row">
<div class="col-md-4 col-md-offset-8">
<button class="btn btn-primary">新增</button>
<button class="btn btn-danger">删除</button>
</div>
</div>
<%--表格数据--%>
<div class="row">
<div class="col-md-12">
<table class="table table-hover">
<tr>
<th>#</th>
<th>lastName</th>
<th>email</th>
<th>gender</th>
<th>deptName</th>
<th>操作</th>
</tr>
<c:forEach items="${pageInfo.list}" var="emp">
<tr>
<td>${emp.empId}</td>
<td>${emp.empName}</td>
<td>${emp.email}</td>
<td>${emp.gender=="M"?"男":"女"}</td>
<td>${emp.department.deptName}</td>
<td>
<button class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
编辑
</button>
<button class="btn btn-danger btn-sm">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
删除
</button>
</td>
</tr>
</c:forEach>
</table>
</div>
</div>
<%--分页信息--%>
<div class="row">
<div class="col-md-6">
当前第${pageInfo.pageNum}页，总共${pageInfo.pages}页，总共${pageInfo.total}条记录
</div>
<div class="col-md-6">
<nav aria-label="Page navigation">
<ul class="pagination">
<li><a href="${APP_PATH}/emps?pn=1">首页</a></li>
<c:if test="${pageInfo.hasPreviousPage}">
<li>
<a href="${APP_PATH}/emps?pn=${pageInfo.pageNum-1}" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
</c:if>
<c:forEach items="${pageInfo.navigatepageNums}" var="page_Num">
<c:if test="${page_Num == pageInfo.pageNum}">
<li class="active"><a href="${APP_PATH}/emps?pn=${page_Num}">${page_Num}</a></li>
</c:if>
<c:if test="${page_Num != pageInfo.pageNum}">
<li><a href="${APP_PATH}/emps?pn=${page_Num}">${page_Num}</a></li>
</c:if>
</c:forEach>
<c:if test="${pageInfo.hasNextPage}">
<li>
<a href="${APP_PATH}/emps?pn=${pageInfo.pageNum+1}" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</c:if>
<li><a href="${APP_PATH}/emps?pn=${pageInfo.pages}">末页</a></li>
</ul>
</nav>
</div>
</div>
</div>
</body>
</html>
3、修改index.jsp：
修改之后：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<title>首页</title>
<%
pageContext.setAttribute("APP_PATH",request.getContextPath());
%>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<%--显示标题--%>
<div class="row">
<div class="col-md-12">
<h1>SSM_CRUD</h1>
</div>
</div>
<%--按钮--%>
<div class="row">
<div class="col-md-4 col-md-offset-8">
<button class="btn btn-primary">新增</button>
<button class="btn btn-danger">删除</button>
</div>
</div>
<%--表格数据--%>
<div class="row">
<div class="col-md-12">
<table class="table table-hover">
<tr>
<th>#</th>
<th>lastName</th>
<th>email</th>
<th>gender</th>
<th>deptName</th>
<th>操作</th>
</tr>
</table>
</div>
</div>
<%--分页信息--%>
<div class="row">
<div class="col-md-6">
当前第页，总共页，总共条记录
</div>
<div class="col-md-6">
</div>
</div>
</div>
</body>
</html>
http://localhost:8080/ssm_crud/
主要是修改了表格数据第三行和分页数据第四行。
页面加载完成以后：
直接去返送Ajax请求，拿到分页数据
这个页面的所有数据都是发送ajax请求获取到然后填充进去的。
接下来就是书写jQuery的ajax请求。
【熟练使用jQuery ajax请求的书写】:
1、
2、
3、
4、请求错误的回调函数
5、请求成功的回调函数
6、请求类型：
先发送ajax请求，我们将数据先打印到浏览器的控制台。
<script type="text/javascript">
$(function (){
$.ajax({
url:"${APP_PATH}/emps",
data:"pn=1",
type:"GET",
success:function (result) {
console.log(result);
}
});
});
</script>
去浏览器测试：
http://localhost:8080/ssm_crud/
这里报的错误主要是我们现在的项目里面还不支持jQuery的库。
解决办法：
在index.jsp页面的head标签里面加入下面这段代码，引入jQuery库。
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
整个head标签：
<head>
<title>首页</title>
<%
pageContext.setAttribute("APP_PATH",request.getContextPath());
%>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</head>
重新部署项目：
测试：
成功拿到后端处理的数据。
谷歌浏览器：
现在拿到的数据：
是将Msg对象转化为json对象。
这个json对象里面包含一些
1、响应的基本信息
2、PageInfo对象（这个对象里面包含页面信息和员工的数据）
所以：
ajax发出请求之后，得到数据，然后需要解析这个json对象，将分页数据显示在第四行分页那里，员工数据显示在第三行表格里面。
在外面新建了两个方法：
//解析员工数据
function build_emp_table(result){
}
//解析分页导航数据
function build_page_nav(result){
}
json的数据结构—员工数据：
编写获取员工数据的方法：
function build_emp_table(result){
}
1、获取对应的员工数据
var emps = result.extend.pageInfo.list;
2、对获取到的员工数据进行遍历：
$.each(emps,function (index, item) {
alert(item.empName);
});
测试一下：
http://localhost:8080/ssm_crud/
循环获取员工数据正确！
我们肯定不是alert的，而是：
将获取到的这些员工数据显示在第三行的表格里面。
处理index.jsp的表格那里的代码：
把所有的标题列th放进thead里面。
处理：json数据里面的员工数据，将这些数据放进tbody标签里面。
//这个是页面加载完成之后调用的方法：
$(function (){
$.ajax({
url:"${APP_PATH}/emps",
data:"pn=1",
type:"GET",
success:function (result) {
// console.log(result);
//1、解析员工数据：
build_emp_table(result);
}
});
});
//这个方法是用来处理员工数据的。
function build_emp_table(result){
var emps = result.extend.pageInfo.list;
$.each(emps,function (index, item) {
var empIdTd = $("<td></td>").append(item.empId);
var empNameTd = $("<td></td>").append(item.empName);
var genderTd = $("<td></td>").append(item.gender=='M'?"男":"女");
var emailTd = $("<td></td>").append(item.email);
var deptNameTd = $("<td></td>").append(item.department.deptName);
var editBtnId = $("<button></button>")
.addClass("btn btn-primary btn-sm")
.append($("<span></span>").addClass("glyphicon glyphicon-pencil"))
.append("编辑");
var delBtnId = $("<button></button>")
.addClass("btn btn-danger btn-sm")
.append($("<span></span>").addClass("glyphicon glyphicon-trash"))
.append("删除");
var btnTd = $("<td></td>")
.append(editBtnId)
.append(" ")
.append(delBtnId);
$("<tr></tr>").append(empIdTd)
.append(empNameTd)
.append(emailTd)
.append(genderTd)
.append(deptNameTd)
.append(btnTd)
.appendTo("#emps_table tbody");
});
}
表格：
<table class="table table-hover" id="emps_table">
<thead>
<tr>
<th>#</th>
<th>empName</th>
<th>email</th>
<th>gender</th>
<th>deptName</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
运行后展示的效果：
接下来就应该解析分页数据了。
然后填充到第四行分页信息那里。
18、
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
