JavaWeb加强之JSON、jQuery、Ajax、Java正则表达式、过滤器、监听器、模板引擎FreeMarker

最新推荐文章于 2023-07-10 17:48:54 发布

新鼬

最新推荐文章于 2023-07-10 17:48:54 发布

阅读量597

点赞数 2

分类专栏： Java Web 文章标签： json jquery ajax filter freemarker

本文链接：https://blog.csdn.net/qq_38326107/article/details/110297600

版权

本文详细介绍了JavaWeb开发中的JSON基础，包括FastJSON的使用，以及jQuery和Ajax的基本概念和操作。讲解了Java正则表达式、过滤器、监听器和FreeMarker模板引擎的应用。通过实例展示了如何实现登录注册功能，探讨了数据传输和页面局部刷新的实现方法。同时，文章提及了JSON与Java交互、jQuery选择器和事件处理，以及Ajax的工作原理和异步请求的重要性。

摘要由CSDN通过智能技术生成

过滤器、监听器，以及JSON、Ajax和正则表达式等开发必备技能，并学习文件上传和验证码等功能开发。

2.4.1 JSON基础

JSON的基础语法，以及流行JSON框架FastJSON的使用。
内容：
在这里插入图片描述

JSON语法规则：

JSON数据是以key/value的形式描述，key和value中间使用冒号分隔开；多组key/value值使用逗号分隔开，例如：{ “firstName”:“John” , “lastName”:“Doe” }。
JSON的作用主要就是数据的存储与传输，易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。使用这种方式可以更快的进行前后台数据的传输。在存储数据方面逐渐替代了xml的功能。从实际的使用看，他们的用途不一样，xml主要用作配置文件和一些简单数据的存储，从后面的学习中可以看到xml作为配置文件是非常常见的。而json更多得用在数据的请求处理中，如通过请求服务器得到json数据，然后在前端或移动端页面中进行显示。
console.log(json);在浏览器控制台中对json内容进行输出。console是浏览器内置对象，log()方法是向控制台输出日志。
JavaScript对JSON有天然的支持特性。
在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。内容中的符合html结构的内容可被直接解析为对应的html标签。用于动态补充或展示页面内容。
Ctrl+Shift+F快捷键格式化代码。
JSON与字符串互相转换：
在这里插入图片描述
JSON是浏览器(IE8以下不支持JSON对象)内置对象。

在javascript的字符串中出现多对””，要使用转义符号\，避免混淆。JSON以[ ]开头表示这是一个json数组的含义，里面含有多个json对象。而只编写{ }则表示的是一个json对象。
JSON对象书写的另一种方式，类似对象。
在这里插入图片描述
每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。document.write()表示向文档写 HTML 表达式或 JavaScript 代码。除此之外常用的还有document.getElementById(“id值”)返回对拥有指定 id 值的第一个标签对象的引用。
console.log()、console.info()的作用都是在浏览器控制台打印信息的，可理解它们两个其实就是同一个，只不过名字不一样，其中console.info()打印出的信息，在控制显示的时候信息前面会出现一个小图标。
Java是开源的全世界的工程师都在为Java添砖增瓦。
JSON与Java交互：
JSON工具包是用来JAVA与JSON之间序列号与反序列化。
在这里插入图片描述
github全世界最著名的开源软件平台(http://www.github.com)。搜索fastjson下载alibaba开发的，可在github下载也可在https://repo1.maven.org/maven2/com/alibaba/fastjson/。下载。
JavaBean简单笼统的说是一种符合一定规范编写的Java类，不是一种技术，而是一种规范 , 表达实体和信息的规范。大家针对这种规范，总结了很多开发技巧、工具函数。符合这种规范的类，可以被其它的程序员或者框架使用。它的方法命名，构造及行为必须符合特定的约定：1、这个类必须具有一个公共的(public)无参构造函数；2、所有属性私有化（private）；
2、私有化的属性必须通过public类型的方法（getter和setter）暴露给其他程序，并且方法的命名也必须遵循一定的命名规范。4、这个类应是可序列化的。（比如可以实现Serializable 接口）。这些特点使它们有更好的封装性和可重用性。并且可以被序列化（持久化），保存在硬盘或者在网络上传输。
Bean译过来是“豆子”的意思，我们是不是只能看到豆子硬硬的外皮，而看不到内部的东西。
通常我们说的API是API文档的简称。API文档就像字典或使用说明书一样的存在，对某样技术用到的接口、类、方法等具体的解释。就像字典一样，在使用时，可以在API中的方法时能够快速找到，学会使用这个方法。
FastJson序列化与JSON注解：
日历类Calendar:月份是从0开始的，这是java中约定俗成的规定，其余的是从1开始的。
在这里插入图片描述
JSON序列化：格式：JSON.toJSONString(需要序列化的JAVA对象/对象数组/对象集合)，将JAVA对象转换成JSON字符串。

JSON注解：格式：@JSONField(属性=属性值),放在JAVA对象中需要设置序列化JSON字符串格式的属性上面。如图：
在这里插入图片描述

@JSONField(format=“yyyy-MM-dd HH:mm:ss”)对(下面代码所示时间属性)属性序列化注解，@JSONField(serialize=false)不对(下面代码所示属性)属性进行序列化。
JSON反序列：格式：JSON.parseObject(需要转换成JAVA对象的JSON字符串，需要转换成JAVA对象的类型),将需要转换成JAVA对象的JSON字符串转换成JAVA对象的类型。
在这里插入图片描述
这里指Employee类编译好的字节码文件，表示将json转换为Employee对象。其他类加不加.class看是否将json转换具体对象。
序列化 (Serialization)是指将对象的状态信息转换为可以存储或传输的形式的过程。可以将其保存到磁盘文件中或通过网络发送到任何其他程序；反序列化是相反的过程(将流转换为对象)。而序列化的一种选择，就是使用json来当作临时存储的方式。JSON又称JavaScript 对象表示法（JavaScript Object Notation），但是它本身是和平台与语言无关的，具有自我描述性，易于理解。json是能直接转换为js对象的一种格式，使用它来存储对象，更加方便。
JSON序列化是把对象包装成JSON字符串传输。Json的优点：明文结构一目了然，可以跨语言，属性的增加减少对解析端影响较小。缺点：字节数过多，无法处理对象方法等数据，依赖于不同的第三方类库。
导入项目后需要配置自己的jdk。项目右击，选择Build Path，Configure Build Path。在右侧Libraies中选择JRE System Library，点击Edit，选择Alternate JER，点击下箭头，选择自己的jdk，点击Finish，Apply and Close。
json反序列化话需要对应实体类有无参构造器。
对于FastJson来说如果JAVA对象的某个属性为null，则序列化不输出此属性的JSON字符串。
JSON.parseArray(JSON字符串,转换成的JAVA对象类型)，JSON字符串(多个JSON对象的数组)转换成JAVA对象List集合：
在这里插入图片描述

2.4.2 jQuery与Ajax基础

介绍JQuery的常用语法规则及如何使用Ajax进行页面局部刷新。
jQuery与Ajax：
内容：
在这里插入图片描述
JavaScript库：

jQuery介绍：

jQuery下载与安装：

EL 表达式是从域中取出之前存好的属性，是 ${}，而jQuery 是$() 并且是获取页面的元素，虽然写法比较类似，但是其实还是没有太大关联的。

jQuery选择器实验室：
在这里插入图片描述
js里addClass()和className 的区别：1、addclass()是JQuery的函数。JavaScript中没有。className 属性可以用来设置或返回元素的 class 属性。2、 addClass() 方法向被选元素添加一个或多个类，该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性–>就是说addClass方法只会向当前被选中的元素添加属性，而不会移除原有属性。className将其赋值为"“可以达到清空元素的class的目的.
选择器的用途：选择需要的元素 $(“a”) $(选择器表达式 (字符串形式)) 。 / / 移除指定的 c s s 类，移除所有具有该 c s s 类的处理。$ (”*").removeClass(“highlight”);在css样式表中书写时，ID选择符前面应该加前缀符号‘#’,标签选择器直接写标签名，类选择器应该加前缀符号‘.’。
Web页面开发的两个要素：
在这里插入图片描述
jQuery选择器：

基本选择器：

层叠选择器：

注：兄弟选择器只能选择在该元素后边并且平级的元素。
属性选择器：

注：属性选择器只会选择明确写了属性的选择器，eg:对于<input>标签默认type=”text”,当不写type时，属性选择器${“input[type=’text’]”不会选择这个<input>。

位置选择器：
在这里插入图片描述
表单选择器：

表单选择器的”:”后边是表单包含的元素的type属性值。注：对于<input>标签默认type=”text”,当不写type时，表单选择器”:text”会选择这个<input>，刚好补充了属性选择器${“input[type=’text’]”不会选择这个<input>。$("selector:input")----------所有输入框。
$("form:text")是选择form表单中的type=’text’元素，而$("selector:text")(写法$(“:text”))是选择页面中所有type=’text’元素；如果是获取写在form表单中的type=’text’就可以使用$("form:input")。
浏览器输入URL中http:// 这个加与不加没区别的，浏览器解析时会默认用这个协议的。

操作元素属性：
在这里插入图片描述

attr()方法中参数只有一个时，是获取这个参数对应的属性值，参数是两个时是设置第一个参数对应的属性的值为第二个参数。
注：获取元素属性时，当拥有此属性的元素为多个时，获取的是第一个元素的属性。
在input的标签中，对于不同的输入类型，value 属性的用法也不同：当type=“button”, “reset”,“submit” -时，value只是为了定义按钮上的显示的文本,所以这里value值并不会清空。
操作元素的CSS样式：
在这里插入图片描述

操作元素的css样式中css()方法中参数只有一个时，是获取这个参数对应的样式属性值，参数是两个时是设置第一个参数对应的样式属性的值为第二个参数。当需要设置多个样式属性可用JSON对象表示法。
注：获取元素样式属性时，当拥有此样式属性的元素为多个时，获取的是第一个元素的样式属性。
在这里插入图片描述
操作元素的css样式中addClass()方法为选择器选中的元素添加多个指定类名需添加空格。
设置元素内容：

val()----获取或设置输入项的值,设置参数，表示更改匹配元素的值；不设置参数，表示获取匹配元素的值。text()—获取或设置元素的纯文本，设置参数，表示更改匹配元素的值；不设置参数，表示获取匹配元素的值。如果文本内容出现标签，不进行转义,输出标签。html()—获取或设置元素内部的html，设置参数，表示更改匹配元素的值；不设置参数，表示获取匹配元素的值。如果文本内容出现标签，进行转义,浏览器会解析标签。
当文本内容不含标签建议使用text()方法，text()和html()方法最大的区别是对于文本中的html标签是否进行转义。
b标签是加粗文本。
$span.myclass")--> 这个是一个组合的选择器，表示选择class为myclass的span标签。 jQuery事件处理方法： ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201129002056578.png) jQuery常用事件： ![在这里插入图片描述](https://img-blog.csdnimg.cn/202011290021036.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzI2MTA3,size_16,color_FFFFFF,t_70) load()方法是从服务器加载数据，并把返回的数据放入被选元素中，需要传入url等参数。当页面初始化后，执行$ (function(){})。使用 $() 选中元素需要使用引号引起来。$ (function(){
alert(“欢迎来到设置颜色的页面”)😉;
在这里插入图片描述