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版本开始走上了代…

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

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

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

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

离线数据同步神器: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小姐姐带…

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

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

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

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

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

戳蓝字“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服务的主配置…

这个2684亿交易额里你贡献了多少?

戳蓝字“CSDN云计算”关注我们哦&#xff01;你们的朋友圈被天猫的双十一交易额刷屏了吗&#xff1f;1今天一大早醒来&#xff0c;按照往常翻了一下朋友圈&#xff0c;朋友圈都在晒天猫的双十一成交额&#xff0c;大家纷纷讨论你为这个交易额贡献了多少&#xff0c;小编表示自己…

大数据驱动业务决策,CDN实时日志重磅上线

背景 CDN是非常重要的互联网基础设施&#xff0c;用户可以通过CDN&#xff0c;快速的访问网络中各种图片&#xff0c;视频等资源。在访问过程中&#xff0c;CDN会产生大量的日志数据&#xff0c;而随着如今越来越复杂的网络环境变化&#xff0c;和业务的迅速增长&#xff0c;日…

oa服务器怎么修改域名,oa域名服务器配置

oa域名服务器配置 内容精选换一换当您想在Internet上通过域名访问您的网站时&#xff0c;可以通过本操作将域名托管至华为云的云解析服务&#xff0c;并为域名添加解析记录。例如&#xff0c;搭建一个网站服务器&#xff0c;采用IPv4格式的弹性IP地址。如果想要实现通过域名“e…

当S8遇上边缘计算:谈阿里云ENS对直播业务场景的支撑

近日&#xff0c;英雄联盟S8全球总决赛落下帷幕&#xff0c;中国战队IG零封FNC夺得冠军。这场比赛引起了国内网友的超高关注度&#xff0c;也给直播平台带来了不小的技术挑战。虎牙直播平台结合阿里云边缘节点技术方案&#xff0c;保障了总决赛当日7000万在线用户的低延时、稳定…

下行物理信道rs_5G物理层服务模型

物理层做为无线通信网络最重要的一层&#xff0c;提供了很多数据传输服务&#xff0c;如下&#xff1a;输通道上的错误检测并向高层进行指示; 传输信道上的FEC&#xff08;Forward Error Correction&#xff09; 编码和解码; Hybrid ARQ 软合并; 编码传输信道到物理信道的速率匹…

谷歌“夜莺计划”秘密采集数百万美国人健康隐私;联发科首款7nm产能的5G芯片;2019年天猫双11落幕,最终成交额2684亿……...

关注并标星星CSDN云计算 速递、最新、绝对有料。这里有企业新动、这里有业界要闻&#xff0c;打起十二分精神&#xff0c;紧跟fashion你可以的&#xff01;每周两次&#xff0c;打卡即read更快、更全了解泛云圈精彩newsgo go go荣耀V30外观剑走偏锋&#xff0c;多维相机矩阵&am…

2135亿!2018 双11阿里数据库技术战报新鲜出炉

00:02:05 成交额超100亿 00:57:56 成交额超666亿 01:47:26 成交额超1000亿 15:49:39 成交额超1682亿 22:28:37 成交额超2000亿 2018新纪录2135亿 在年度大考面前 阿里数据库技术的小哥哥和小姐姐们 又一次为大众递交了诚意满满的答卷 让我们来看看 面对2分05秒破100亿的交易洪…

ftp 553 Could not create file

关闭SELinux&#xff1a;1、临时关闭&#xff08;不用重启机器&#xff09;&#xff1a; setenforce 0 2、修改配置文件需要重启机器&#xff1a; 修改/etc/selinux/config 文件 将SELINUXenforcing改为SELINUXdisabled 重启机器即可 …

阿里云发布Quick BIV3.0,人人都能轻松进行在线数据分析

提到BI与OLAP这两个概念&#xff0c;对于很多做数据库的技术人员来说并不陌生。BI随着时代的发展逐渐出现了新型BI和传统型BI的划分&#xff0c;从目前的发展程度来看&#xff0c;传统型BI正在慢慢地衰退&#xff0c;由于传统型BI存在从业门槛高&#xff0c;需要专业的IT人员来…

同事操作两个数据源保持事务一致_终于有人把分布式事务说清楚了

前言这篇文章将给大家介绍一下对分布式事务的一些见解&#xff0c;并讲解分布式事务处理框架 TX-LCN 的执行原理&#xff0c;错误之处望各位不吝指正。1. 什么情况下需要使用分布式事务&#xff1f;使用的场景很多&#xff0c;先举一个常见的&#xff1a;在微服务系统中&#x…