ajax技术应用详细分析（后端java与客户端请求的结合）_Java

Ajax 技术应用

先回看模态框的使用
js比较薄弱
在这里插入图片描述
如上比如这部分
加粗样式

在这里插入图片描述

如下是BOM窗口对象
在这里插入图片描述

**

js最薄弱建议在浏览器练习

** confirm方法
在这里插入图片描述

跳转练习

新疑问:怎么分辨js,jQuery和jsp代码与其实现应用

插入小点

在这里插入图片描述
**

延申说法 client客户端发送请求 (客户端层面)是client前端页面层

**

**

重要知识点补回来提要:冒泡排序和正则表达式(可能需要用到js)

**
在这里插入图片描述

用于初始化

目的为了规范日期

引入

自己学着加入一个新的js功能下拉日期datetimepicker

在这里插入图片描述

可能存在的问题

今晚学着自己去加入失败了再看码云上的源码试试脱离老师写代码

新要求

结束

现在看Hi现场源码

新功能

错过了下只能核对码云源码了
在这里插入图片描述

实现state状态超时变成0 变成失效

1.dao层
数据层
在这里插入图片描述
2.Service业务逻辑层

在这里插入图片描述

自己开始导包

**
在这里插入图片描述

添加state状态过时变成0 失效

1.controller层 html 客户端层面
controller无改动

html

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link href="/datepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen"> </head> <body> <div class="container"> <h1>The Activity Page</h1> <!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">创建活动</button> <table class="table"> <thead> <tr> <th>title</th> <th>Category</th> <th>StartTime</th> <th>EndTime</th> <th>State</th> <th>Operation</th> </tr> </thead> <tbody> <tr th:each="aty:${list}"> <td th:text="${aty.title}"></td> <td th:text="${aty.category}"></td> <td th:text="${#dates.format(aty.startTime, 'yyyy/MM/dd HH:mm')}"></td> <td th:text="${#dates.format(aty.endTime, 'yyyy/MM/dd HH:mm')}"></td> <td th:text="${aty.state==1?'有效':'无效'}"></td> <td><button type="button" class="btn btn-danger btn-sm" th:onclick="doDeleteObject([[${aty.id}]])">delete</button></td> </tr> </tbody> </table> </div> <!-- Modal(模态框) --> <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">创建活动</h4> </div> <!-- Body部分 --> <div class="modal-body"> <form class="form-horizontal" th:action="@{/activity/doSaveActivity}" method="post"> <div class="form-group"> <label for="titleId" class="col-sm-2 control-label">标题</label> <div class="col-sm-10"> <input type="text" class="form-control" name="title" id="titleId" placeholder="title"> </div> </div> <div class="form-group"> <label for="categoryId" class="col-sm-2 control-label">类型</label> <div class="col-sm-10"> <select id="categoryId" name="category" class="form-control"> <option value="教育培训">教育培训</option> <option value="企业活动">企业活动</option> <option value="交友活动">交友活动</option> </select> </div> </div> <div class="form-group" > <label for="startTimeId" class="col-sm-2 control-label">开始时间</label> <div class="col-sm-10"> <input type="text" class="form-control form_datetime" name="startTime" id="startTimeId" placeholder="start time"> </div> </div> <div class="form-group"> <label for="endTimeId" class="col-sm-2 control-label">结束时间</label> <div class="col-sm-10"> <input type="text" class="form-control form_datetime" name="endTime" id="endTimeId" placeholder="end time"> </div> </div> <div class="form-group"> <label for="remarkId" class="col-sm-2 control-label">备注</label> <div class="col-sm-10"> <textarea type="text" class="form-control" rows="5" name="remark" id="remarkId"> </textarea> </div> </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="doSaveObject()">Save Changes</button> </div> </div> </div> </div> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> <script src="/jquery/jquery.min.js"></script> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> <script src="/bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="/datepicker/js/bootstrap-datetimepicker.min.js" charset="UTF-8"></script> <script type="text/javascript" src="/datepicker/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script> <script type="text/javascript"> //datetimepicker函数由bootstrap-datetimepicker.min.js定义,用于初始化日期控件 $('.form_datetime').datetimepicker({//这里的form_datetime为input标签中的class选择器
		  language: "zh-CN",
		  format: "yyyy/mm/dd hh:ii",
		  autoclose: true }) function doDeleteObject(id){ if(!confirm("确定删除吗?"))return; location.href="/activity/doDeleteObject/"+id;//restful } function doSaveObject(){ //表单校验(可考虑使用正则表达式) //提交表单
		 //$(form)基于标签名(例如这里的标签名form)称获取表单对象
		 //submit为jquery中的一个对象函数,通过此函数可以提交表单. $("form").submit();//提交表单 } </script> </body> </html>

2.dao层与mapper
在这里插入图片描述

@Update("update tb_activity set state=0 where id=#{id}") int updateState(Long id);

在这里插入图片描述

 <insert id="insertObject" parameterType="com.cy.pj.activity.pojo.Activity" useGeneratedKeys="true" keyProperty="id"> insert into tb_activity (title,category,startTime,endTime,remark,state,createdUser,createdTime) values (#{title},#{category},#{startTime},#{endTime},#{remark},#{state},#{createdUser},now()) </insert>

3.service层
接口无变动
在这里插入图片描述
doSaveActivity

@Override
	public int saveActivity(Activity entity) { int rows=activityDao.insertObject(entity); System.out.println("saveActivity.threadName="+Thread.currentThread().getName()); //??????
		//开启活动倒计时(活动到了结束时间应该将其状态修改为0) //方案:(自己尝试) //1)Java 官方:
		//1.1)Timer
		//1.2)ScheduledExecutorService
		//2)借助第三方的任务调度框架(任务调度框架,quartz) //方案1:Timer应用
		//1.1构建Timer对象
		Timer timer=new Timer();//此对象可以负责去执行一些任务(这个对象内置一个线程和一个任务队列) //1.2启动线程执行任务
		timer.schedule(new TimerTask() {//TimerTask为任务
			@Override
			public void run() {//一旦调用此任务的线程获得了CPU就会执行这个任务的run方法
				System.out.println("updateState.threadName="+Thread.currentThread().getName()); System.out.println("执行任务..."); activityDao.updateState(entity.getId()); } }, entity.getEndTime());//按指定时间执行任务. return rows; }

4.html页面看效果
pojo
activity.java
修正日期格式
在这里插入图片描述

@DateTimeFormat(pattern = "yyyy-MM-dd")

这里不对先注释了
修改
在这里插入图片描述

//Spring MVC基于@DateTimeFormat指定的日期格式接收客户端提交数据,假如没有指定默认为yyyy/MM/dd
	@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm") private Date startTime; /** 活动结束时间 */
	@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm")

页面效果
在这里插入图片描述

如上两图以实现晚上自己对代码复刻一遍