ajax中itemtexts,49-基于AJAX实践操作(活动模块)

基于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";//返回的相当于是一个提示信息

}

}

客户端操作

核心代码

使用模态框

创建活动

×

Modal title

标题

id="titleId" name="title"

placeholder="please input title">

类型

id="categoryId" name="category"

placeholder="please input category">

开始时间

id="startTimeId" name="startTime"

placeholder="please input startTime">

结束时间

id="endTimeId" name="endTime"

placeholder="please input end time">

备注

rows="3" cols="100" name="remark"

placeholder="please input end time">

Close

Save changes

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&......