同步：同一个线程内部按顺序执行
异步：多个线程同时并行执行，谁也不等谁
1.异步的工作方式
1.1图解
1.2代码
<button id="asyncBtn">发送一个Ajax请求</button>
<script type="text/javascript">
$(function () {
//绑定单击函数
$("#asyncBtn").click(function () {
console.log("ajax函数之前");
//点击相应的按钮就发送下面的异步请求
$.ajax({
"url":"/test/ajax/async",//请求地址
"type":"post", //请求的方式
"dataType":"text", //返回的数据类型，text普通文本
//同步异步的区别就是下面的success控制的。success是接收到服务器端响应后执行的
"success":function (response) {
console.log("ajax函数内部的success函数"+response);
}
});
//在$.ajax()执行完之后执行，不等待success()函数
console.log("ajax函数之后");
});
});
</script>
Controller中的代码
@ResponseBody
@RequestMapping("/test/ajax/async")
public String testAsync(){
return "success";
}1.3打印的效果
2.同步的工作方式
2.1图解
2.2代码
<button id="asyncBtn">发送一个Ajax请求</button>
<script type="text/javascript">
$(function () {
//绑定单击函数
$("#asyncBtn").click(function () {
console.log("ajax函数之前");
//点击相应的按钮就发送下面的异步请求
$.ajax({
"url":"/test/ajax/async",//请求地址
"type":"post", //请求的方式
"dataType":"text", //返回的数据类型，text普通文本
"async":false, //关闭异步工作方式，使用同步方式工作。此时：所有操作在同一个线程内顺序完成
//success是接收到服务器端响应后执行的函数
"success":function (response) {
console.log("ajax函数内部的success函数"+response);
}
});
//在$.ajax()执行完之后执行，不等待success()函数
console.log("ajax函数之后");
});
});
</script>
Controller中的代码
@ResponseBody
@RequestMapping("/test/ajax/async")
public String testAsync(){
return "success";
}2.3打印的效果
3.以Ajax的请求方式实现ssm整合项目尚筹网中的角色维护功能
3.1目标：
- ①.将角色数据进行分页显示
- ②.关键字查询操作
- ③.在打开的模态框中输入角色名称，执行角色保存操作
- ④.角色更新操作
- ⑤.前端的“单条删除”和“批量删除”在后端合并为同一套操作。合并的依据是：单
条删除时 id 也放在数组中，后端完全根据 id 的数组进行删除。
3.2思路
3.3代码：后端
3.3.1创建数据库表
CREATE TABLE `t_role` ( `id` INT NOT NULL, `name` CHAR(100), PRIMARY KEY (`id`) );
ALTER TABLE `t_role` CHANGE `id` `id` INT(11) NOT NULL AUTO_INCREMENT;3.3.2逆向工程生成资源
3.3.3 创建roleService和roleServiceImpl和RoleController
public interface RoleService {
PageInfo<Role> getRolePageInfo(String keyword, Integer pageNum, Integer pageSize);
}
@Service
public class RoleServiceImpl implements RoleService {
@Autowired
private RoleMapper roleMapper;
@Override
public PageInfo<Role> getRolePageInfo(String keyword, Integer pageNum, Integer pageSize) {
// 1.调用pagehelper的静态方法，开启分页的功能
//这里充分的体现了pagehelper的"非侵入式"设计，原本要做的查询不必有任何修改
PageHelper.startPage(pageNum,pageSize);
// 2.执行查询
List<Role> roleList = roleMapper.selectRoleByKeyword(keyword);
// 3.封装到pageInfo对象中
return new PageInfo<>(roleList);
}
}
@Controller
public class RoleController {
@Autowired
private RoleService roleService;
@ResponseBody
@RequestMapping("/ajax/role/to/page")
public ResultEntity<PageInfo<Role>> getRoleForAjax(
@RequestParam(value = "keyword",defaultValue = "") String keyword,
@RequestParam(value = "pageNum",defaultValue = "1") Integer pageNum,
@RequestParam(value = "pageSize",defaultValue = "5") Integer pageSize){
// 调用 Service 方法获取分页数据
PageInfo<Role> rolePageInfo = roleService.getRolePageInfo(keyword, pageNum, pageSize);
// 封装到 ResultEntity 对象中返回（如果上面的操作抛出异常，交给异常映射机制处理）
return ResultEntity.successWithData(rolePageInfo);
}
}3.3.4往RoleMapper接口中添加方法，RoleMapper.xml中写sql语句
RoleMapper接口
List<Role> selectRoleByKeyword(@Param("keyword") String keyword);
RoleMapper.xml
<select id="selectRoleByKeyword" resultMap="BaseResultMap">
select id, name
from t_role
where name like concat ("%",#{keyword},"%")
</select>3.3.5代码：过渡
①.完善role-page.html，在include-sidebar中修改 " 角色维护 " 超链接
<!--Ajax的请求方式实现角色的维护-->
<li style="height:30px;">
<a th:href="@{/ajax/role/to/page}"><i class="glyphicon glyphicon-king"></i> 角色维护</a>
</li>
②.在springmvc配置文件spring-web-mvc.xml中配置view-controller用以跳转页面
<mvc:view-controller path="/ajax/role/to/page" view-name="role-page"/>3.4代码：前端
3.4.1在role-page.html中写script代码，用以初始化数据，调用分页函数执行分页
<link rel="stylesheet" th:href="@{/css/pagination.css}"/>
<script type="text/javascript" th:src="@{/jquery/jquery.pagination.js}"></script>
<script type="text/javascript" th:src="@{/crowd/my-role.js}"></script>
<script type="text/javascript">
$(function () {
// 1.为分页操作准备初始化数据（把变量放在window对象上，作为全局变量）
window.pageNum = 1;
window.pageSize = 5;
window.keyword = "";
// 2.调用分页函数执行分页
generatePage();
// 3.给查询按钮绑定单击响应函数,单击的时候会被调用
$("#searchBtn").click(function () {
//归1，结果从第一页开始显示
window.pageNum = 1;
// ①获取关键词数据赋值给对应的全局变量
window.keyword = $("#keywordInput").val();
// ②调用分页函数刷新页面
generatePage();
});
});
</script>
<!--以下代码只粘贴了部分关键代码-->
<form class="form-inline" role="form" style="float:left;">
<div class="form-group has-feedback">
<div class="input-group">
<div class="input-group-addon">查询条件</div>
<input id="keywordInput" class="form-control has-success" type="text" placeholder="请输入查询条件">
</div>
</div>
<button id="searchBtn" type="button" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i> 查询</button>
</form>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th width="30">#</th>
<th width="30"><input type="checkbox"></th>
<th>名称</th>
<th width="100">操作</th>
</tr>
</thead>
<tbody id="rolePageBody"><!-- 这里显示数据 --></tbody>
<tfoot>
<tr>
<td colspan="6" align="center">
<div id="Pagination" class="pagination"><!-- 这里显示分页 --></div>
</td>
</tr>
</tfoot>
</table>
</div>3.4.2提取的my-role.js代码，主要功能是：
- 执行分页，生成页面效果
- 远程访问服务器端程序，获取pageInfo数据
- 填充表格，显示分页的主体数据
- 生成分页页码的导航条
- 翻页时用的回调函数：点击数字，执行翻页的函数，给pagination用的回调函数
// 调用此函数，就会生成分页的效果(执行分页，生成页面效果，任何时候调用这个函数都会重新加载页面)
function generatePage() {
// 1.获取分页数据
var pageInfo = getPageInfoRemote();
// 2.根据pageInfo填充表格
fillTableBody(pageInfo);
}
// 远程访问服务器端程序，获取pageInfo数据
function getPageInfoRemote() {
// 方式1：
// 调用$.ajax()函数发送请求并接收$.ajax()函数的返回值
var ajaxResult = $.ajax({
"url":"/ajax/role/get/page",
"type":"post",
"data":{
"pageNum":window.pageNum,
"pageSize":window.pageSize,
"keyword":window.keyword
},
"async":false,
"dataType":"json",
});
console.log(ajaxResult);
// 判断当前响应状态码是否为200
var statusCode = ajaxResult.status;
// 如果当前响应状态码不是200，说明发生错误或其他意外情况，显示提示信息，让当前函数停止执行
if(statusCode != 200){
layer.msg("失败！响应状态码="+statusCode+" 说明信息="+ajaxResult.statusText);
return null;
}
// 如果当前响应状态码是200，说明请求成功，获取pageInfo
var resultEntity = ajaxResult.responseJSON;
// 从resultEntity中获取result属性
var result = resultEntity.operationResult;
//判断result是否成功
if(result != "SUCCESS"){
layer.msg(resultEntity.operationMessage);
return null;
}
// 确认result为成功后获取pageInfo
var pageInfo = resultEntity.queryData;
//返回pageInfo
return pageInfo;
// 方式2：
// $.ajax({
// "url":"/ajax/role/get/page",
// "type":"post",
// "data":{
// "pageNum":window.pageNum,
// "pageSize":window.pageSize,
// "keyword":window.keyword
// },
// "async":false,
// "dataType":"json",
// "success":function (response) {
// var pageInfo = response.data;
// },
// "error":function () {
//
// }
// });
// fillTableBody(pageInfo)
}
// 填充表格，显示分页的主体数据
function fillTableBody(pageInfo) {
// 清除tbody中的旧的内容
$("#rolePageBody").empty();
// 清除分页导航栏中的旧的内容
$("#Pagination").empty();
// 判断pageInfo对象是否有效
if(pageInfo == null || pageInfo == undefined || pageInfo.list == null || pageInfo.list.length == 0){
$("#rolePageBody").append("<tr><td colspan='4' align='center'>抱歉！没有查询到您搜索的数据！</td></tr>");
return ;
}
// 使用pageInfo的list属性填充tbody
for(var i = 0;i < pageInfo.list.length;i++){
var role = pageInfo.list[i];
var roleId = role.id;
var roleName = role.name;
var numberTd = "<td>"+(i+1)+"</td>";
var checkboxTd = "<td><input type='checkbox'></td>";
var roleNameTd = "<td>"+roleName+"</td>";
var checkBtn = "<button type='button' class='btn btn-success btn-xs'><i class='glyphicon glyphicon-check'></i></button>";
var pencilBtn = "<button type='button' class='btn btn-primary btn-xs'><i class='glyphicon glyphicon-pencil'></i></button>";
var removeBtn = "<button type='button' class='btn btn-danger btn-xs'><i class='glyphicon glyphicon-remove'></i></button>";
var buttonTd = "<td>"+checkBtn+" "+pencilBtn+" "+removeBtn+"</td>";
var tr = "<tr>"+numberTd+checkboxTd+roleNameTd+buttonTd+"</tr>";
$("#rolePageBody").append(tr);
}
generateNavigator(pageInfo);
}
// 生成分页页码的导航条
function generateNavigator(pageInfo) {
// 获取总记录数
var totalRecord = pageInfo.total;
// 声明一个json对象存储Pagination要设置的属性
var properties = {
"num_edge_entries": 3, //边缘页数
"num_display_entries": 5, //主体页数
"callback": paginationCallBack, //指定用户点击"翻页"的按钮时跳转页面的回调函数
"items_per_page": pageInfo.pageSize, //每页显示多少条
"current_page": pageInfo.pageNum - 1, //当前选中的页面
"prev_text": "上一页", //"上一页按钮上显示的文本"
"next_text": "下一页"
};
//生成页码导航条
$("#Pagination").pagination(totalRecord, properties);
}
// 翻页时用的回调函数：点击数字，执行翻页的函数，给pagination用的回调函数
function paginationCallBack(pageIndex, jQuery) {
// 修改window对象的pageNum属性
window.pageNum = pageIndex + 1;
// 调用分页函数
generatePage();
// 由于每个页码按钮都是超链接，所以在这个函数最后取消超链接的默认行为
return false;
}3.5角色保存操作的代码
3.5.1点击新增按钮打开一个模态框，用以填写新增角色信息
//模态框的代码，放在modal-role-add.html中
<div id="addModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title"> 尚筹网系统弹窗</h4>
</div>
<div class="modal-body">
<form class="form-signin" role="form">
<div class="form-group has-success has-feedback">
<input type="text" name="roleName" class="form-control" id="inputSuccess4" placeholder="请输入角色名称" autofocus>
</div>
</form>
</div>
<div class="modal-footer">
<button id="saveRoleBtn" type="button" class="btn btn-primary"> 保 存</button>
</div>
</div>
</div>
</div>
//role-page.html中引入模态框,放在文件的最末尾
</div>
<div th:include="modal-role-add"></div>
</body>
//role-page.html中,配置新增按钮的信息：
<button type="button" id="showAddModalBtn" class="btn btn-primary" style="float:right;"><i class="glyphicon glyphicon-plus"></i> 新增</button>
<script/>中：
// 4.点击新增按钮打开模态框
$("#showAddModalBtn").click(function(){
$("#addModal").modal("show");
});3.5.2给新增模态框中的保存按钮绑定单击响应函数
// 5.给新增模态框中的保存按钮绑定单击响应函数
$("#saveRoleBtn").click(function(){
// ①获取用户在文本框中输入的角色名称
// #addModal 表示找到整个模态框
// 空格表示在后代元素中继续查找
// [name=roleName]表示匹配 name 属性等于 roleName 的元素
var roleName = $.trim($("#addModal [name=roleName]").val());
// ②发送 Ajax 请求
$.ajax({
"url": "/role/save",
"type":"post",
"data": {
"name": roleName
},
"dataType": "json",
"success":function(response){
var result = response.operationResult;
if(result == "SUCCESS") {
layer.msg("操作成功！");
// 将页码定位到最后一页
window.pageNum = 99999999;
// 重新加载分页数据
generatePage();
}
if(result == "FAILED") {
layer.msg("操作失败！"+response.message);
}
},
"error":function(response){
layer.msg(response.status+" "+response.statusText);
}
});
// 关闭模态框
$("#addModal").modal("hide");
// 清理模态框
$("#addModal [name=roleName]").val("");
});3.5.3后端实现保存操作的代码
Controller中：
@ResponseBody
@RequestMapping("/role/save")
public ResultEntity<String> saveRole(Role role){
roleService.saveRole(role);
return ResultEntity.successWithoutData();
}
ServiceImpl中：
@Override
public void saveRole(Role role) {
roleMapper.insert(role);
}3.6角色更新操作
3.6.1创建更新的模态框并引入
在role-page.html中引入模态框
<div th:include="modal-role-edit"></div>
创建更新模态框：文件名：modal-role-edit.html
<div id="editModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">尚筹网系统弹窗</h4>
</div>
<div class="modal-body">
<form class="form-signin" role="form">
<div class="form-group has-success has-feedback">
<input type="text" name="roleName" class="form-control" placeholder="请输入角色名称" autofocus>
</div>
</form>
</div>
<div class="modal-footer">
<button id="updateRoleBtn" type="button" class="btn btn-success"> 更 新</button>
</div>
</div>
</div>
</div>3.6.2代码：打开模态框且实现回显功能
//①修改 "铅笔" 按钮
修改 fillTableBody()函数
// 通过 button 标签的 id 属性（别的属性其实也可以）把 roleId 值传递到 button 按钮的单击响应函数中，在单击响应函数中使用 this.id
var pencilBtn = "<button id='"+roleId+"' type='button' class='btn btn-primary btn-xs pencilBtn'><iclass=' glyphicon glyphicon-pencil'></i></button>";
//② 给"铅笔"按钮绑定单击响应函数
// 给页面上的"铅笔 "按钮绑定单击响应函数，目的是打开模态框
// 传统的事件绑定方式只能在第一个页面有效，翻页后失效了,因为重新生成了这些按钮
// $(".pencilBtn").click(function(){
// alert("aaaa...");
// });
// 使用 jQuery 对象的 on()函数可以解决上面问题
// ①首先找到所有“动态生成”的元素所附着的“静态”元素：<tbody id="rolePageBody"></tbody>
// ②on()函数的第一个参数是事件类型
// ③on()函数的第二个参数是找到真正要绑定事件的元素的选择器
// ③on()函数的第三个参数是事件的响应函数
$("#rolePageBody").on("click",".pencilBtn",function(){
// 打开模态框
$("#editModal").modal("show");
// 获取表格中当前行中的角色名称
var roleName = $(this).parent().prev().text();
// 获取当前角色的 id
// 依据是：var pencilBtn = "<button id='"+roleId+"' ……这段代码中我们把 roleId 设置到 id 属性了
// 为了让执行更新的按钮能够获取到 roleId 的值，把它放在全局变量上
window.roleId = this.id;
// 回显：使用 roleName 的值设置模态框中的文本框
$("#editModal [name=roleName]").val(roleName);
});
//③执行更新操作
//给新增模态框中的更新按钮绑定单击响应函数
$("#updateRoleBtn").click(function(){
//①获取用户在文本框中输入的新的角色名称
var roleName = $("#editModal [name=roleName]").val();
$.ajax({
"url":"/role/update",
"type":"post",
"data":{
"id":window.roleId,
"name":roleName
},
"dataType":"json",
"success":function (response) {
var result = response.operationResult;
if(result == "SUCCESS") {
layer.msg("操作成功！");
// 重新加载分页数据
generatePage();
}
if(result == "FAILED") {
layer.msg("操作失败！"+response.message);
}
},
"error":function(response){
layer.msg(response.status+" "+response.statusText);
}
});
// 关闭模态框
$("#editModal").modal("hide");
});3.6.3后端实现更新操作的代码
RoleController中：
@ResponseBody
@RequestMapping("/role/update")
public ResultEntity<String> updateRole(Role role){
roleService.update(role);
return ResultEntity.successWithoutData();
}
RoleServiceImpl中：
@Override
public void update(Role role) {
roleMapper.updateByPrimaryKey(role);
}3.7角色删除操作：前端的“单条删除”和“批量删除”在后端合并为同一套操作。合并的依据是：单
条删除时 id 也放在数组中，后端完全根据 id 的数组进行删除。
3.7.1后端实现删除操作的代码
RoleController中：
@ResponseBody
@RequestMapping("/role/delete/by/roleIdArray")
public ResultEntity<String> removeByRoleIdArray(@RequestBody List<Integer> roleIdList){
roleService.removeRole(roleIdList);
return ResultEntity.successWithoutData();
}
RoleServiceImpl中：
@Override
public void removeRole(List<Integer> roleIdList) {
RoleExample example = new RoleExample();
RoleExample.Criteria criteria = example.createCriteria();
//delete from t_role where id in (5,8,12)
criteria.andIdIn(roleIdList);
roleMapper.deleteByExample(example);
}3.7.2前端代码：
①.创建确认删除的模态框并引入
<div th:include="modal-role-confirm"></div>
<div id="confirmModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">尚筹网系统弹窗</h4>
</div>
<div class="modal-body">
<h4>请确认是否要删除下列的角色：</h4>
<div id="roleNameDiv" style="text-align: center"></div>
</div>
<div class="modal-footer">
<button id="removeRoleBtn" type="button" class="btn btn-success"> 确认删除</button>
</div>
</div>
</div>
</div>②.声明一个函数用于打开模态框，函数写在my-role.js文件中
// 声明专门的函数显示确认模态框
function showConfirmModal(roleArray) {
// 打开模态框
$("#confirmModal").modal("show");
// 清除旧的数据
$("#roleNameDiv").empty();
// 在全局变量范围创建数组用来存放角色id
window.roleIdArray = [];
// 遍历roleArray数组，拿到要删除角色的名字
for(var i = 0;i < roleArray.length;i++){
var role = roleArray[i];
//role.roleName,是从网页上取出来的值
var roleName = role.roleName;
$("#roleNameDiv").append(roleName+"<br/>");
var roleId = role.roleId;
// 调用数组对象的push()存入新的元素
window.roleIdArray.push(roleId);
}
}③.为了执行删除操作，my-role.js文件中的代码修改部分
var checkboxTd = "<td><input id='"+roleId+"' class='itemBox' type='checkbox'></td>";
// 通过button标签的id属性把roleId值传递到按钮的单击响应函数中，在单击响应函数中使用this.id拿到其值。
var removeBtn = "<button id='"+roleId+"' type='button' class='btn btn-danger btn-xs removeBtn'><i class='glyphicon glyphicon-remove'></i></button>";④.role-page.html中的html标签和js代码
<button id="batchRemoveBtn" type="button" class="btn btn-danger" style="float:right;margin-left:10px;"><i class=" glyphicon glyphicon-remove"></i> 删除
<th width="30"><input id="summaryBox" type="checkbox"></th>
// 8.点击确认模态框中的确认删除按钮执行删除
$("#removeRoleBtn").click(function () {
// 准备要发送的数组
var roleIdArray = window.roleIdArray;
// 将json数组转换成json字符串
var requestBody = JSON.stringify(roleIdArray);
$.ajax({
"url":"/role/delete/by/roleIdArray",
"type":"post",
"data":requestBody,
"contentType":"application/json;charset=UTF-8",//告诉服务器端当前请求的请求体是JSON格式
"dataType":"json",
"success":function (response) {
var result = response.operationResult;
if(result == "SUCCESS") {
layer.msg("操作成功！");
// 重新加载分页数据
generatePage();
}
if(result == "FAILED") {
layer.msg("操作失败！"+response.message);
}
},
"error":function(response){
layer.msg(response.status+" "+response.statusText);
}
});
// 关闭模态框
$("#confirmModal").modal("hide");
// 每次删除完之后，把总的多选框改成未勾选状态
$("#summaryBox").prop("checked",false);
});
// 9.给单条删除的按钮绑定单击响应函数
// ①首先找到所有“动态生成”的元素所附着的“静态”元素：<tbody id="rolePageBody"></tbody>
// ②on()函数的第一个参数是事件类型
// ③on()函数的第二个参数是找到真正要绑定事件的元素的选择器
// ③on()函数的第三个参数是事件的响应函数
$("#rolePageBody").on("click",".removeBtn",function(){
// 从当前按钮出发去获取角色名称
var roleName = $(this).parent().prev().text();
// 创建role对象存入数组
var roleArray = [{
"roleId":this.id,
"roleName":roleName
}];
showConfirmModal(roleArray);
});
// 10.给总的CheckBox绑定单击响应函数
$("#summaryBox").click(function () {
// ①.获取当前多选框自身的状态:选中、未选中
var currentStatus = this.checked;
// ②.用当前多选框的状态设置其他多选框
$(".itemBox").prop("checked",currentStatus);
});
// 11.全选和全不选的反向操作
$("#rolePageBody").on("click",".itemBox",function () {
// 获取当前已经选中的.itemBox的数量
var checkedBoxCount = $(".itemBox:checked").length;
// 获取全部.itemBox的数量
var totalBoxCount = $(".itemBox").length;
// 使用二者的比较结果设置总的checked
$("#summaryBox").prop("checked",checkedBoxCount == totalBoxCount);
});
// 12.给批量删除的按钮绑定单击响应函数
$("#batchRemoveBtn").click(function () {
var roleArray = [];
// $(".itemBox:checked")拿到被勾选的多选框，通过each()去遍历选中的多选框
$(".itemBox:checked").each(function () {
// 使用this引用当前遍历到的多选框
var roleId = this.id;
// 通过DOM操作获取我们的角色的名称
var roleName = $(this).parent().next().text();
roleArray.push({
"roleId":roleId,
"roleName":roleName
});
});
// 检查roleArray的长度是否为0
if(roleArray.length == 0){
layer.msg("请至少选择一个执行删除");
return;
}
// 调用专门的函数打开模态框
showConfirmModal(roleArray);
});本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
