49-基于AJAX实践操作（活动模块）

49-基于AJAX 实践操作（活动模块）⽬录
基于AJAX 实践操作(活动模块)
基于Ajax 在springboot 项⽬中实现查询加载操作
服务端操作核⼼代码
dao 层代码实现@Mapper public interface ActivityDao { @Select("select * from tb_activity order by createdTime desc")
List<Activity> findActivitys();
}
业务层代码@Service public class ActivityServiceImpl implements ActivityService { @Autowired
private ActivityDao activityDao;
@Override
public List<Activity> findActivitys() {
return activityDao.findActivitys();
}
}
控制层代码
Spring MVC 框架底层默认会使⽤jackson API 将对象转换为json 格式字符串。

@Controller
public class ActivityController {
@Autowired
private ActivityService activityService;
//先给客户端返回⼀个页⾯,然后再返回数据
@RequestMapping("/activity/doActivityUI")
public String doActivityUI() {
return "activity";
}
@RequestMapping("/activity/doFindActivitys")
@ResponseBody //此注解⽤于告诉spring mvc 要对此⽅法的返回结果进⾏转换处理
//假如⽅法返回值为对象(不包含字符串，直接量),spring mvc 可以将其转换为json 格式的字符串
public List<Activity> doFindActivitys(){
return activityService.findActivitys();
}//Spring MVC 框架底层默认会使⽤jackson API 将对象转换为json 格式字符串。

}
客户端操作
#####
核⼼代码
ajax请求操作
<div class="container">
<table class="table">
<thead>
<tr>
<th><input type="checkbox">全选</th>
<th>名称</th>
<th>开始时间</th>
<th>结束时间</th>
<th>状态</th>
<th colspan="2">操作</th>
</tr>
</thead>
<tbody id="tbodyId">
<tr>
<td colspan="6"> 数据正在加载中。

</td>
</tr>
</tbody>
</table>
</div>
通过⽂档就绪函数,当页⾯加载完成后,执⾏加载数据的函数.前提要引⼊jquery⽂件
<script type="text/javascript" src="/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
// $(document).ready(function{})
//⽂档就绪函数
$(function(){
doGetActivitys();
})
//基于ajax技术向服务端发异步请求获取数据，然后更新的页⾯上。

function doGetActivitys(){
//1.定义url
//var url="/activity/doFindActivitys";//当url"/"开头时表⽰这个url要替换掉浏览器中url端⼝号后⾯内容 var url="doFindActivitys";//当url没有以“/”开头时，这个名字要替换掉浏览中最后⼀个"/"后⾯的内容 //2.定义请求参数
//3.发送异步ajax请求，处理响应结果
//Jquery中GetJSON函数应⽤
//向服务端发送Get请求，并将服务端返回的json格式字符串转换为json格式的js对象
$.getJSON(url,function(result){//callback处理服务端响应的结果
//debugger
//获取tbody对象
var tBody=$("#tbodyId");
//清空tbody中内容
tBody.empty();
//迭代result对象，并将result内容追加到tbody中
result.forEach(item=>tBody.append(doCreateRow(item)));
})
}
function doCreateRow(item){
//ES6中可以使⽤``替换字符串的连接，其内部取值可使⽤${}表达式
return `<tr>
<td><input type=checkbox value=${item.id}></td>
<td>${item.title}</td>
<td>${item.startTime}</td>
<td>${item.endTime}</td>
<td>${item.state==1?'有效':'⽆效'}</td>
<td><button type='button' class='btn btn-warning btn-sm'
onclick='doDeleteById(${item.id})'>delete</button></td>
</tr>`;
}
也可以通过字符串拼接的⽅式实现
function doGetActivitys(){
//定义url
var url ="doFindActivity";
//定义请求参数
//发送异步请求,处理响应结果
//向服务端发送get 请求
, $.get(url,function(data){//处理结果
var tBody = $("#tBody");
tBody.empty();
//迭代data 对象,
for(var i =0;i<data.length;i++)
{
//创建⾏
var tr = doCreateRow(data[i])
//追加
tBody.append(tr);
}
},"json")//当返回的类型是json 格式的字符串时,这⾥写json,若返回的是⼀个普通字符串可以写成
text }
function doCreateRow(item){
return "<tr>"+
"<td><input type='checkbox' value="+item.id+"/></td>"+
"<td>"+item.title+"</td>"+
"<td>"+item.startTime+"</td>"+
"<td>"+item.endTime+"</td>"+
"<td>"+item.state+"</td>"+ "<td>"+delete+"</td>"+
"</tr>"
}
细节分析:
1 关于json 的字符串转化
2 关于es6中使⽤``代替字符串拼接
ES6中可以使⽤``替换字符串的连接，其内部取值可使⽤${}表达式
"<tr>"+
"<td><input type='checkbox' value="+item.id+"/></td>"+
"</tr>"
//注意:字符串拼接的时候,当外⾯使⽤双引号后,内部属性只能使⽤单引号
可以转化为以下形式`<tr>
<td><input type=checkbox value=${item.id}></td></tr>`
3 关于路径的问题//var url="/activity/doFindActivitys";
//当url"/"开头时表⽰这个url 要替换掉浏览器中url 端⼝号后⾯内容
//var url="doFindActivitys";
//当url 没有以“/”开头时，这个名字要替换掉浏览中最后⼀个"/"后⾯的内容
4 关于⽇期时间的格式化问题
//此注解⽤于描述属性或set ⽅法，告诉spring mvc 按指定格式接收客户端数据
@DateTimeFormat(pattern = "yyyy/MM/dd HH:mm")//应⽤场景对应set ⽅法
@JsonFormat(pattern = "yyyy/MM/dd HH:mm",timezone = "GMT+8")//此注解⽤于描述属性或get ⽅法
private Date startTime;//java.util.Date
@DateTimeFormat(pattern = "yyyy/MM/dd HH:mm")
//将⼀个对象转换为json 格式字符串时，
//底层会调⽤其get ⽅法获取值，然后基于@JsonFormat 定义的⽇期格式进⾏转换。

@JsonFormat(pattern = "yyyy/MM/dd HH:mm",timezone = "Asia/Shanghai")//应⽤场景对应get ⽅法
5 加载数据之前,要将页⾯的提⽰信息删除掉
tBody.empty();
基于Ajax 在springboot 项⽬中实现删除加载操作
服务端操作
核⼼代码
#####
dao 层代码实现@Mapper public interface ActivityDao { @Delete("delete from tb_activity where id=#{id}")
int deleteById(Long id);
}
业务层代码@Service public class ActivityServiceImpl implements ActivityService { @Autowired
private ActivityDao activityDao;
@Override
public int deleteById(Long id) {
return activityDao.deleteById(id);
}
}
控制层代码
Spring MVC 框架底层默认会使⽤jackson API 将对象转换为json 格式字符串。

@Controller
public class ActivityController {
@Autowired
private ActivityService activityService;
//先给客户端返回⼀个页⾯,然后再返回数据
@RequestMapping("/activity/doActivityUI")
public String doActivityUI() {
return "activity";
}
@RequestMapping("/activity/doDeleteById")
@ResponseBody
public String doDeleteById(Long id) {
activityService.deleteById(id);
return "delete ok";//此时返回的就是⼀个普通的字符串,在客户端进⾏处理的时候,需要按照text 的格式进⾏处理.不能按照json 格式字符串进⾏处理. }
}
客户端操作
核⼼代码<button type='button' class='btn btn-warning btn-sm'
onclick='doDeleteById(${item.id})'>delete</button>
<script> function doDeleteById(id){
if(!confirm("确定删除吗"))return;
//定义url
var url="doDeleteById";
//定义参数
var params=`id=${id}`;//或者"id="+id
//发送异步请求执⾏删除操作
//基于jquery 中post 函数发送异步请求
$.post(url,params,function(result){//客户端与服务端通讯结束会回调此函数
alert(result);
doGetActivitys();//刷新
});
}
</script>
细节分析:
1 删除后需要再次展⽰最新的数据,需要再次异步访问,刷新数据
$.post(url,params,function(result){//客户端与服务端通讯结束会回调此函数
alert(result);
doGetActivitys();//刷新
});
####
2 关于获取当前⾏id
onclick='doDeleteById(${item.id})'
基于Ajax 在springboot 项⽬中实现新增加载操作
服务端操作核⼼代码
dao 层代码实现
mapper ⽂件<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE mapper
PUBLIC "-////DTD Mapper 3.0//EN"
"/dtd/mybatis-3-mapper.dtd"><mapper namespace="com.cy.pj.activity.dao.ActivityDao"> <insert id="insertObject"> insert into tb_activity
(title,category,startTime,endTime,remark,state,createdTime,createdUser)
values
(#{title},#{category},#{startTime},#{endTime},#{remark},1,now(),#{createdUser})
</insert>
</mapper>
@Mapper
public interface ActivityDao { int insertObject(Activity entity);}业务层代码
@Service
public class ActivityServiceImpl implements ActivityService {
@Autowired
private ActivityDao activityDao;
@Override
public int saveObject(Activity entity) { return activityDao.insertObject(entity);
}
}
控制层代码
Spring MVC 框架底层默认会使⽤jackson API 将对象转换为json 格式字符串。

@Controller public class ActivityController {
@Autowired
private ActivityService activityService; @RequestMapping("/activity/doSaveObject")
@ResponseBody
public String doSaveObject(Activity entity) { activityService.saveObject(entity);
return "save ok";//返回的相当于是⼀个提⽰信息
}
}
客户端操作
核⼼代码
使⽤模态框
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">创建活动</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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">&times;</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<form method="post">
<div class="form-group">
<label for="titleId">标题</label>
<input type="text" class="form-control"
id="titleId" name="title"
placeholder="please input title">
</div>
<div class="form-group">
<label for="categoryId">类型</label>
<input type="text" class="form-control"
id="categoryId" name="category"
placeholder="please input category">
</div>
<div class="form-group">
<label for="startTimeId">开始时间</label>
<input type="text" class="form-control"
id="startTimeId" name="startTime"
placeholder="please input startTime">
</div>
<div class="form-group">
<label for="endTimeId">结束时间</label>
<input type="text" class="form-control"
id="endTimeId" name="endTime"
placeholder="please input end time">
</div>
<div class="form-group">
<label for="remarkId">备注</label>
<textarea class="form-control" id="remarkId"
rows="3" cols="100" name="remark"
placeholder="please input end time"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="doSaveOrUpdate()">Save changes</button>
</div>
</div>
</div>
</div>
doSaveOrUpdate事件的实现
function doSaveOrUpdate(){
debugger
//1.定义url
var url="doSaveObject";
//2.获取表单数据
//serialize()为jquery中获取表单数据的⼀个函数
var params=$("form").serialize();//title=A&category=CB&......
//console.log("params",params);
//3.异步提交表单数据，并处理响应结果
$.ajax({
"url":url,//请求url
"method":"post",//请求⽅式
"dataType":"text",//服务端响应数据类型
"data":params,//向服务端传递的参数
"success":function(result){
console.log("result",result);
//给出提⽰信息
alert(result);
//⼿动隐藏模态框
$('#myModal').modal('hide');
//清除表单原有数据
$(".form-control").val("");
//重新查询，刷新页⾯
doGetActivitys();
}
});
}
##
细节分析:
1 关于清除表单原有数据的⽅式
//⽅式⼀:给数据设置为空字符串
$(".form-control").val("");
//⽅式⼆:重置表单信息
$("form")[0].reset();
2 关于响应数据的格式
//服务端响应数据类型
"dataType":"text"//服务端响应的数据是普通的字符串"dataType":"json"//服务端响应的数据是json个数字符串
3 ⼿动隐藏模态框
$('#myModal').modal('hide');
4 ajax的规范书写模式
url,method , dataType,data,success,error可带双引号也可以不带双引号$.ajax({
"url":url,//请求url
"method":"post",//请求⽅式
"dataType":"text",//服务端响应数据类型
"data":params,//向服务端传递的参数
"success":function(result){
//.....正确信息响应以及处理
},
"error":function(){
//.....错误信息处理提⽰
}
5 获取提交的表单的数据的函数
//serialize()为jquery中获取表单数据的⼀个函数
var params=$("form").serialize();//title=A&category=CB&......。