java学习day49-基于AJAX实践操作(活动模块)

目录

• 基于AJAX实践操作(活动模块)
  • 基于Ajax在springboot项目中实现查询加载操作
    • 服务端操作
    • 客户端操作
    • 细节分析:
  • 基于Ajax在springboot项目中实现删除加载操作
    • 服务端操作
    • 客户端操作
    • 细节分析:
  • 基于Ajax在springboot项目中实现新增加载操作
    • 服务端操作
    • 客户端操作
    • 细节分析:

基于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 "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/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&......