基于AJAX实践操作(活动模块)
基于Ajax在springboot项目中实现查询加载操作
服务端操作
核心代码
dao层代码实现
@Mapper
public interface ActivityDao {
@Select("select * from tb_activity order by createdTime desc")
List findActivitys();
}
业务层代码
@Service
public class ActivityServiceImpl implements ActivityService {
@Autowired
private ActivityDao activityDao;
@Override
public List 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 doFindActivitys(){
return activityService.findActivitys();
}//Spring MVC框架底层默认会使用jackson API将对象转换为json格式字符串。
}
客户端操作
核心代码
ajax请求操作
全选名称开始时间结束时间状态操作
数据正在加载中。。。。。。通过文档就绪函数,当页面加载完成后,执行加载数据的函数.前提要引入jquery文件
// $(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 `
${item.title}${item.startTime}${item.endTime}${item.state==1?'有效':'无效'}οnclick='doDeleteById(${item.id})'>delete
`;}
也可以通过字符串拼接的方式实现
function doGetActivitys(){
//定义url
var url ="doFindActivity";
//定义请求参数
//发送异步请求,处理响应结果
//向服务端发送get请求,
$.get(url,function(data){//处理结果
var tBody = $("#tBody");
tBody.empty();
//迭代data对象,
for(var i =0;i
{
//创建行
var tr = doCreateRow(data[i])
//追加
tBody.append(tr);
}
},"json")//当返回的类型是json格式的字符串时,这里写json,若返回的是一个普通字符串可以写成text
}
function doCreateRow(item){
return "
"+"
"+"
"+item.title+""+"
"+item.startTime+""+"
"+item.endTime+""+"
"+item.state+""+"
"+delete+""+"
"}
细节分析:
1 关于json的字符串转化
2 关于es6中使用``代替字符串拼接
ES6中可以使用``替换字符串的连接,其内部取值可使用${}表达式
"
"+"
"+"
"//注意:字符串拼接的时候,当外面使用双引号后,内部属性只能使用单引号
可以转化为以下形式
`
`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格式字符串进行处理.
}
}
客户端操作
核心代码
οnclick='doDeleteById(${item.id})'>delete
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();//刷新
});
}
细节分析:
1 删除后需要再次展示最新的数据,需要再次异步访问,刷新数据$.post(url,params,function(result){//客户端与服务端通讯结束会回调此函数
alert(result);
doGetActivitys();//刷新
});
2 关于获取当前行idοnclick='doDeleteById(${item.id})'
基于Ajax在springboot项目中实现新增加载操作
服务端操作
核心代码
dao层代码实现
mapper文件
/p>
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
insert into tb_activity
(title,category,startTime,endTime,remark,state,createdTime,createdUser)
values
(#{title},#{category},#{startTime},#{endTime},#{remark},1,now(),#{createdUser})
@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";//返回的相当于是一个提示信息
}
}
客户端操作
核心代码
使用模态框
创建活动
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&......