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

Ajax 技术应用

先回看 模态框的使用

js比较薄弱

628af4a152d0ef3f14fa9754c249d4f4.png

如上 比如这部分

加粗样式

cf2225a588b5c9112dc1951d787d8bb5.png

1956f63cdb44b50733ec6a70863cd9c4.png

如下 是BOM窗口对象

3eccd99cc702c3f110703a0ad84b7349.png

107575ff8c270c64a544711e6a547cb9.png

**

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

** confirm方法

9a12f54de7b95ee46c5500a57f383026.png

3fe1246e1874723b51fe58794067b4b6.png

c64c52bd5fe078b2165c4e90da4fa53a.png

跳转练习

1c0cb1e2f9c181fbcd3509e0b3bfd95b.png

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

f8b42cf6f1837e1a327fd66d0014ec1d.png

180c8e1fadc3221d737d1d54056db133.png

插入小点

8ef528b5e0a092dcec4c24c2f99963af.png

**

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

**

bbf9d2e459f710308eb6fb29694913d3.png

**

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

**

1195cfd4ec1d37cf3382ce9e0a850cc8.png

762fa8e9d46d5996bb80ad3161450880.png

用于初始化

506b895a7647edb3cb455767a3f9c85f.png

cb4f5fa45e61ee6ae1800eef39f2dc0f.png

目的 为了规范日期

66dde2ede532d286ff5361a9e549dd36.png

引入

93c3f0ecc71128b41471ac8a0c1a6f77.png

ed09d1be0ad5000bece7c0e084013584.png

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

8ff3faef4a098b8cc86ab958b5ad30ff.png

6395521f66b33052b816ab0ff57fe657.png

可能存在的问题

630a502e1911decebabbc6e78982f3f7.png

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

新要求

结束

现在看Hi现场源码

新功能

错过了下 只能核对码云源码了

063d43468955aae2a39c94421dcd3631.png

7c7e9b41500a2583dfd6083afb0d4fff.png

a5a87a54af34d4625ff1c20886138a5e.png

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

1.dao层

数据层

f7aded810ad8235fc0d82399ee943c96.png

2.Service业务逻辑层

400102cf6e9c9c964272756a28b89511.png

b00ba5e07690d2d0f1aba0b85a5b0812.png

24eb172cc5104e55f26c8228e9d125b9.png

ace1e254bb229b8fd6f021aec157a3d7.png

72edcaf2c2752c256cf1a2c770d68570.png

**

自己开始导包

**

7780762cc359e5b1722919255da2327a.png

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

1.controller层 html 客户端层面

controller无改动

html

Insert title here

The Activity Page

创建活动
titleCategoryStartTimeEndTimeStateOperation
delete

2.dao层与mapper

4f24e7924ef614803ae8dd06333277c4.png

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

e89543f4a565db50da440ff47f0f4439.png

insert into tb_activity (title,category,startTime,endTime,remark,state,createdUser,createdTime) values (#{title},#{category},#{startTime},#{endTime},#{remark},#{state},#{createdUser},now())

3.service层

接口无变动

8b05b3623e7205f16062ce8759354cd9.png

doSaveActivity

96ec2a261dfe82ca3a064d5ff55408de.png

@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

修正日期格式

e8b82e54c1e3e3c17cdb18a9dac82131.png

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

这里不对 先注释了

修改

645babe5ade7e5d8bf8c0f0cca4e03d6.png

//Spring MVC基于@DateTimeFormat指定的日期格式接收客户端提交数据,假如没有指定默认为yyyy/MM/dd

@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm") private Date startTime; /** 活动结束时间 */

@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm")

页面效果

00844f00f0f65d17a094da031305cad0.png

41bb5e6bf1f727a3abc76bccd81242a2.png

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

7e0ed5837c73926fdaedca71b2710201.png

自己操作一下

7f404750cba4e0ceb5ca5b87330f6d9d.png

030dbc50dba0c9dd83831cb5347bbebf.png

有注解后 由系统底层去赋予相应的东西

118d62e8c6ea9a7512bb5887cb934d25.png

Ajax

f94b2b923fec1eb031483c22207b3026.png

b576a32b9dcacd8f8bda2bb449785fdb.png

3935bc7aa725edd4c34c3e31fb527aff.png

Ajax入门案列

ddaad6d9fd8c174db4b6d3f23e49e0cf.png

5d7f189cea789c74cf435fff9aaff825.png

d99d3fd8439e87db7f963c761222d5b2.png

44ca6614c19f9eddab40e43e532750fb.png

eb53bb2a8ca354f953dcc6d911dba6be.png

85d6c36b3b7649dc14a830cbf7c64f9d.png

303e4c035ed981ee30e19fda42bdf675.png

总结 自己回看

31cd94ece5788e1f5273547050dd1c8d.png

开始创建项目

**AJAX相关

e7980a244bc94e47925a732a8f0e79af.png

f713f5708466137964f91afc60c2df31.png

467750265b4d28f216d2b2ed7064a5e3.png

13db6dc923dd3d877247e5acd3adf592.png

da3373b0f17a54daa19dfdb2a3cdd560.png

加js函数

d5cba00bb0d356c9f8b5fb4074cd15b9.png

步骤

9afd74b8d6f869f21efe3b6e055348e8.png

4dc95eee0b93590da2773a78c793bb94.png

2.创建controller层

5331fd165c58102a936e4882c70420a3.png

90efd50783cc4cc4a75226476ff7d575.png

错误示范

7de7c2f565dc9a68a96d452d73de0edb.png

对应回客户端层

523905d5be3ec36d7692b2804897bbd9.png

ffd721be3c248d7355f86543e14988fb.png

3.页面 客户端层面实现

4c900734ad5bd5e33890ac4296365f6e.png

041386784678a2e7adc284e0d211350c.png

插入小点 span

06a6a5e7f1aa19697e45c3a543706ad9.png

4.再次深入拓展

原理

ffd721be3c248d7355f86543e14988fb.png

客户端层

62f519539a00cb06d6b80068680b579b.png

controller层

2f0e37da911673c545af00cd5954ae16.png

第三步 建立连接处的同步与异步处理

1e43cf6ca1c33b551918038d024ca5c9.png

09c6a4df18fffbb1b8aa928156f8c1dd.png

9ceca09ec48b194b43f12c3ae3a42c06.png

实现了按钮与span框的异步更新

controller层的模拟休眠处理

3秒耗时操作

3ec3a50208f504bbe1fad25db4dfb8f4.png

(1)异步处理 true

a0af47f70c63ee02c80258047b7d60bf.png

ba38a9133ea5c6a82e0d24af4384ffdb.png

938b09444b2539099a749de312bd3f5d.png

不同线程 看谁先打印 console在主线程

c0c3c2396263e198d94ea3aaf2bccd76.png

5d792e94d86f79693b86958bbd541f0a.png

如上图 凸显了异步操作

(2)同步处理 false

a0d2bf70c5d4be9934e69d9406ebebc3.png

7bb92588eb8b46b0ac70ed87ea20595e.png

结果

9e71724dbfb1b056ea06100675859b2b.png

baebbc670a5116cde959a0555fb43d78.png

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/520564.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL的未来在哪?

阿里云 MySQL&MariaDB 数据库产品结合开源社区,提供了稳定、可靠、便捷、弹性的在线数据库服务,帮助全球企业客户进行数字化转型。MySQL发展经历了一系列变化,从Sun到Oracle,发展也经过了几个阶段。MySQL从5.7版本开始走上了代…

Git 汇总

怎样比较暂存区和HEAD所含文件的变化?适用于,工作区的文件已经添加至暂存区,尚未进行提交,比较暂存区和当前分支的文件的不同,如果添加至暂存区的文件正确的,可以进行提交,推送远程;…

代码写成这样,老板把我开除了| IT 巨能唠

今天聊一聊遇到过的一些神逻辑代码&#xff0c;不一定很全&#xff0c;但真心让小编我自叹不如啊&#xff01;1、耍猴的最佳手段还记得 XX 手机的抢购活动么&#xff0c;抢购按钮的代码类似是这样的&#xff1a;<a href"javasript:alert(抢购结束!)">立即抢购&…

springboot+vue项目如何在linux上部署

在linux上部署项目&#xff0c;是我们实训项目作业的最后一步&#xff0c;此时我们的项目编码测试已经完成&#xff0c;接下来就需要在服务器上部署上线&#xff0c;那么如何部署上线&#xff0c;接下来我会在虚拟机上的CentOS7系统上实现部署&#xff0c; 一.下载JDK 因为我…

如何把暂存区恢复成和HEAD的一样?

使用场景&#xff1a; 本来打算&#xff0c;将暂存区的文件&#xff0c;进行提交本地仓分支当做一个新的版本&#xff0c; 但是发现&#xff0c;现在工作区的对文件的修改更适合作为一个新的版本&#xff0c;提交 至本地仓库的分支上&#xff0c;暂存区的文件需要全部删除&…

ajax respon有数据,Ajax怎么通过response在后台传递数据?(附代码)

这次给大家带来Ajax怎么通过response在后台传递数据&#xff1f;(附代码)&#xff0c;Ajax通过response在后台传递数据的注意事项有哪些&#xff0c;下面就是实战案例&#xff0c;一起来看一下。这是js代码&#xff1a;var System {getHttpRequest: function(url, callback, o…

离线数据同步神器:DataX,支持几乎所有异构数据源的离线同步到MaxCompute

概述 DataX 是阿里巴巴集团内被广泛使用的离线数据同步工具/平台&#xff0c;实现包括 MySQL、Oracle、SqlServer、Postgre、HDFS、Hive、ADS、HBase、TableStore(OTS)、MaxCompute(ODPS)、DRDS 等各种异构数据源之间高效的数据同步功能。 DataX本身作为数据同步框架&#xf…

MaxCompute Hash Clustering介绍

背景 在MaxCompute查询中&#xff0c;Join是很常见的场景。例如以下Query&#xff0c;就是一个简单的Inner Join把t1表和t2表通过id连接起来&#xff1a; SELECT t1.a, t2.b FROM t1 JOIN t2 ON t1.id t2.id; Join在MaxCompute内部主要有三种实现方法&#xff1a; Broadca…

上热搜了!“学了Python6个月,竟然找不到工作!”

在编程界&#xff0c;Python是一种神奇的存在。有人认为&#xff0c;只有用Python才能优雅写代码&#xff0c;提高代码效率&#xff1b;但另一部分人恨不能把Python喷成筛子。那么&#xff0c;Python到底有没有用&#xff0c;为什么用Python找不到工作&#xff1f;CSDN小姐姐带…

.net core razor ajax,.NET CORE Razor Pages Ajax 调用 C# 方法

我目前正在制作一个网站来在谷歌地图上显示位置。我从 Airtable.com 数据库中获取了位置地址&#xff0c;那里的一切都运行良好。然而&#xff0c;因为谷歌只允许一定数量的地理编码地址请求&#xff0c;我想将坐标保存在同一个数据库中&#xff0c;所以我只在需要查找新位置(地…

wget连接指定端口_新技能:wget参数有用过吗?

Wget是一个从网络上自动下载文件的工具&#xff0c;支持HTTP、HTTPS、ftp三个最常见的TCP/IP协议下载&#xff0c;并可以使用HTTP代理。“wget”这个名称来源于“world wide web”与“get”的结合。自动下载文件时什么意思&#xff1f;就是指&#xff1a;wget可以在用户退出系统…

Git 工作区恢复暂存区操作总览

如何让工作区的全部文件恢复为和暂存区一样&#xff1f; 应用场景&#xff1a; 在工作区我做了一版文件优化的操作&#xff0c;将工作区优化的文件添加至暂存区&#xff0c;先不进行提交&#xff1b;然后&#xff0c;在工作区又对优化版本进行修改&#xff0c;但是测试效果&…

数据脱敏平台-大数据时代的隐私保护利器

什么是数据脱敏 又称数据漂白、数据去隐私化或数据变形。是对核心业务数据中敏感的信息&#xff0c;进行变形、转换、混淆&#xff0c;使得对业务数据中的身份、组织等隐私敏感信息进行去除或掩盖&#xff0c;以保护数据能被合理、安全地利用。 数据脱敏的重要性 1&#xff09;…

S8赛事落幕,阿里云边缘计算护航虎牙7000万低延时流畅直播

近日&#xff0c;英雄联盟S8全球总决赛落下帷幕&#xff0c;中国战队IG零封FNC夺得冠军。虎牙直播平台对S8赛事进行了实时直播&#xff0c;为网友们献上了一场身临其境的狂欢&#xff0c;值得注意的是&#xff0c;本次赛事直播&#xff0c;虎牙采用阿里云边缘节点服务&#xff…

arp 华为 查看 路由器_华为路由器运行状态查看-路由器

华为路由器运行状态查看为了查看路由器的工作状态&#xff0c;和输入指令是否已经起作用&#xff0c;这时我们就需要用到DISPLAY命令&#xff0c;该命令可以让我们随时了解路由器的各种状态&#xff0c;以便排除故障。华为路由器的display命令可以在某个特殊接口下运行&#xf…

服务器配置再生龙系统,PXE引导再生龙安装步骤

《PXE引导再生龙安装步骤》由会员分享&#xff0c;可在线阅读&#xff0c;更多相关《PXE引导再生龙安装步骤(6页珍藏版)》请在人人文库网上搜索。1、PXE引导再生龙安装步骤使用PXE引导再生龙可以方便机房使用再生龙软件&#xff0c;并且可以实现批量无人值守安装我们的Tistone系…

git 随机摘要

重命名 git mv oldFileName newFileName撤销本地仓库和暂存区提交的记录和提交的文件 git reset --hard创建新分支(基于某次提交或者基于某个分支) git checkout -b 分支名 提交id/分支名查看git历史记录 git log 查看git历史记录简约一条 git log --oneline 查看git历史记录简…

数据中台送到家 企业数字化转型“输血”变“造血”

戳蓝字“CSDN云计算”关注我们哦&#xff01;作者 | 刘丹 责编&#xff5c;阿秃出品 | CSDN云计算&#xff08;ID&#xff1a;CSDNcloud&#xff09;如果有人要问2019年技术圈什么最热&#xff0c;“中台”绝对当仁不让&#xff0c;从观望到试水&#xff0c;很多公司做出了从 0…

虚拟服务器 端口管理,Apache服务配置虚拟主机(基于域名、端口、IP地址)与简单访问权限管理...

虚拟Web主机在同一台物理服务器中运行多个Web站点&#xff0c;其中每一一个站点并不独立占用一台真正的计算机。httpd支持的虚拟主机类型基于域名的虚拟主机基于IP地址的虚拟主机基于端口的虚拟主机构建虚拟主机------基于域名(1)安装bind、httpd服务。(2)进入named服务的主配置…

阿里云发布迁移解决方案,“迁移上云”这件事有专业的人做

近日&#xff0c;阿里云发布了迁移解决方案&#xff0c;旨在为客户提供一站式迁移综合解决方案&#xff0c;将迁移相关的资源统一呈现&#xff0c;帮助客户安全、稳定和高效迁移上云。 解决什么问题&#xff1f; 客户想要上云&#xff0c;需要自己评估整体方案&#xff0c;但…