ajax技术应用详细分析(后端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">×</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")
页面效果
如上两图 以实现 晚上自己对代码复刻一遍
自己操作一下
有注解后 由系统底层去赋予相应的东西
Ajax
Ajax入门案列
总结 自己回看
开始创建项目
**AJAX相关
加js函数
步骤
2.创建controller层
错误示范
对应回客户端层
3.页面 客户端层面实现
插入小点 span
4.再次深入拓展
原理
客户端层
controller层
第三步 建立连接处的同步与异步处理
实现了按钮与span框的异步更新
controller层的模拟休眠处理
3秒耗时操作
(1)异步处理 true
不同线程 看谁先打印 console在主线程
如上图 凸显了异步操作
(2)同步处理 false
结果
上面是同步和异步的点!!!
本文地址:https://blog.csdn.net/qq_43765881/article/details/107854432
上一篇: 两两交换链表的结点——力扣——24题
下一篇: 菊花和枸杞的功效是什么