欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-21 13:09:48
今天主讲Ajax 技术应用复习回看 模态框的使用js比较薄弱如上 比如这部分如下 是BOM窗口对象**js最薄弱 建议在浏览器练习** confirm方法跳转练习新疑问:怎么分辨js,jQuery和jsp代码 与其实现应用插入小点**延申说法 client客户端发送请求 (客户端层面)是client前端页面层****重要知识点补回来 提要:冒泡排序和正则表达式(可能需要用到js)**......
Ajax 技术应用

先回看 模态框的使用
js比较薄弱
ajax技术应用详细分析(后端java与客户端请求的结合)
如上 比如这部分
加粗样式

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

如下 是BOM窗口对象
ajax技术应用详细分析(后端java与客户端请求的结合)
ajax技术应用详细分析(后端java与客户端请求的结合)
**

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

** confirm方法
ajax技术应用详细分析(后端java与客户端请求的结合)
ajax技术应用详细分析(后端java与客户端请求的结合)
ajax技术应用详细分析(后端java与客户端请求的结合)
跳转练习
ajax技术应用详细分析(后端java与客户端请求的结合)
新疑问:怎么分辨js,jQuery和jsp代码 与其实现应用
ajax技术应用详细分析(后端java与客户端请求的结合)
ajax技术应用详细分析(后端java与客户端请求的结合)

插入小点

ajax技术应用详细分析(后端java与客户端请求的结合)
**

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

**
ajax技术应用详细分析(后端java与客户端请求的结合)
**

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

**
ajax技术应用详细分析(后端java与客户端请求的结合)
ajax技术应用详细分析(后端java与客户端请求的结合)
用于初始化
ajax技术应用详细分析(后端java与客户端请求的结合)
ajax技术应用详细分析(后端java与客户端请求的结合)
目的 为了规范日期
ajax技术应用详细分析(后端java与客户端请求的结合)
引入
ajax技术应用详细分析(后端java与客户端请求的结合)
ajax技术应用详细分析(后端java与客户端请求的结合)
自己学着加入一个新的js功能 下拉 日期datetimepicker

ajax技术应用详细分析(后端java与客户端请求的结合)
ajax技术应用详细分析(后端java与客户端请求的结合)
可能存在的问题
ajax技术应用详细分析(后端java与客户端请求的结合)

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

新要求

结束

现在看Hi现场源码

新功能

错过了下 只能核对码云源码了
ajax技术应用详细分析(后端java与客户端请求的结合)
ajax技术应用详细分析(后端java与客户端请求的结合)
ajax技术应用详细分析(后端java与客户端请求的结合)

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

1.dao层
数据层

ajax技术应用详细分析(后端java与客户端请求的结合)
2.Service业务逻辑层ajax技术应用详细分析(后端java与客户端请求的结合)

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

**

自己开始导包

**
ajax技术应用详细分析(后端java与客户端请求的结合)

添加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
ajax技术应用详细分析(后端java与客户端请求的结合)

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

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

 <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层
接口无变动

ajax技术应用详细分析(后端java与客户端请求的结合)
doSaveActivity
ajax技术应用详细分析(后端java与客户端请求的结合)

@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
修正日期格式
ajax技术应用详细分析(后端java与客户端请求的结合)

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

这里不对 先注释了
修改
ajax技术应用详细分析(后端java与客户端请求的结合)

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

页面效果
ajax技术应用详细分析(后端java与客户端请求的结合)
ajax技术应用详细分析(后端java与客户端请求的结合)
如上两图 以实现 晚上自己对代码复刻一遍

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

自己操作一下
ajax技术应用详细分析(后端java与客户端请求的结合)
ajax技术应用详细分析(后端java与客户端请求的结合)
有注解后 由系统底层去赋予相应的东西
ajax技术应用详细分析(后端java与客户端请求的结合)

Ajax

ajax技术应用详细分析(后端java与客户端请求的结合)
ajax技术应用详细分析(后端java与客户端请求的结合)
ajax技术应用详细分析(后端java与客户端请求的结合)
Ajax入门案列ajax技术应用详细分析(后端java与客户端请求的结合)
ajax技术应用详细分析(后端java与客户端请求的结合)
ajax技术应用详细分析(后端java与客户端请求的结合)
ajax技术应用详细分析(后端java与客户端请求的结合)
ajax技术应用详细分析(后端java与客户端请求的结合)
ajax技术应用详细分析(后端java与客户端请求的结合)

ajax技术应用详细分析(后端java与客户端请求的结合)
总结 自己回看
ajax技术应用详细分析(后端java与客户端请求的结合)

开始创建项目

**AJAX相关
ajax技术应用详细分析(后端java与客户端请求的结合)
ajax技术应用详细分析(后端java与客户端请求的结合)
ajax技术应用详细分析(后端java与客户端请求的结合)
ajax技术应用详细分析(后端java与客户端请求的结合)
ajax技术应用详细分析(后端java与客户端请求的结合)
加js函数
ajax技术应用详细分析(后端java与客户端请求的结合)

步骤
ajax技术应用详细分析(后端java与客户端请求的结合)
ajax技术应用详细分析(后端java与客户端请求的结合)
2.创建controller层
ajax技术应用详细分析(后端java与客户端请求的结合)

ajax技术应用详细分析(后端java与客户端请求的结合)
错误示范
ajax技术应用详细分析(后端java与客户端请求的结合)

对应回客户端层
ajax技术应用详细分析(后端java与客户端请求的结合)

ajax技术应用详细分析(后端java与客户端请求的结合)
3.页面 客户端层面实现
ajax技术应用详细分析(后端java与客户端请求的结合)

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

插入小点 span
ajax技术应用详细分析(后端java与客户端请求的结合)
4.再次深入拓展
原理
ajax技术应用详细分析(后端java与客户端请求的结合)
客户端层ajax技术应用详细分析(后端java与客户端请求的结合)
controller层
ajax技术应用详细分析(后端java与客户端请求的结合)
第三步 建立连接处的同步与异步处理
ajax技术应用详细分析(后端java与客户端请求的结合)
ajax技术应用详细分析(后端java与客户端请求的结合)

ajax技术应用详细分析(后端java与客户端请求的结合)
实现了按钮与span框的异步更新


controller层的模拟休眠处理


3秒耗时操作
ajax技术应用详细分析(后端java与客户端请求的结合)
(1)异步处理 true
ajax技术应用详细分析(后端java与客户端请求的结合)
ajax技术应用详细分析(后端java与客户端请求的结合)
ajax技术应用详细分析(后端java与客户端请求的结合)

不同线程 看谁先打印 console在主线程
ajax技术应用详细分析(后端java与客户端请求的结合)
ajax技术应用详细分析(后端java与客户端请求的结合)

如上图 凸显了异步操作
(2)同步处理 falseajax技术应用详细分析(后端java与客户端请求的结合)
ajax技术应用详细分析(后端java与客户端请求的结合)
结果
ajax技术应用详细分析(后端java与客户端请求的结合)
ajax技术应用详细分析(后端java与客户端请求的结合)

上面是同步和异步的点!!!

本文地址:https://blog.csdn.net/qq_43765881/article/details/107854432