form表单与thymeleaf入门

最新推荐文章于 2025-03-06 00:36:42 发布

千击万磨还坚劲，任尔东西南北风

最新推荐文章于 2025-03-06 00:36:42 发布

阅读量2.8k

点赞数 19

文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_73917015/article/details/130909134

版权

本文介绍了HTML中的form表单使用，包括GET和POST提交方式，以及表单的注意事项。同时，文章探讨了POST与GET方法的区别，强调POST的安全性和数据量限制。在处理表单提交时，建议使用JavaScript进行控制以优化用户体验。此外，文章还简述了Thymeleaf模板引擎的入门，包括添加依赖、基础语法和局部刷新的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.form表单

1.1form表单用法

当前后端交互时，后端返回一个网址，我们可以用form表单进行提交数据
当后端的接口如下时
在这里插入图片描述

html代码

<form action="url" method="get">
    <input name="email"  />//对应上述接口名email
    <input name="password" tpye="password" />//对应上述接口名password
    <input id="submit" type="submit" value="登录" />//触发from提交事件
</form>

这就是最简单的用法，我们完全可以给它添加一些样式。

1.2form表单的注意事项

1.form表单提交方式其实时dopost与doget两种方法。
2.form表单默认的提交方式是get，默认的地址是当前地址，如果想要改为post方法需要手动添加method=“post”
3.form不可内嵌form
4.form提交后会自动刷新页面，也就是说用form同时用ajax体验很不好。

1.2.1关于post和get的区别

1，get用于传递数据小的内容，内容只允许字符串，他会直接把值代入当前地址中，不安全。下图为例在这里插入图片描述

2.post可以传递大量数据不仅仅于字符串，还可以适用于二进制文件如文件，图片之类传输。，他不会加在地址后方，所以比较安全。

想要了解更多的可以看看get于post区别（超详细）

1.3form的提交

当你要为用户输入的数据进行判断是，直接提交肯定是不妥的，我们可以用js改写。
在我这里又两种方式
1.在上面input的submit删去，其后增加一个隐藏input（display:none）处理，同时这个改为提交
html

<input  onclick=submit()"" value="登录" />
<input id="submit" style="display:none;" type="submit"/>

js代码

const submitLgin=document.getElementById("submit");
function submit(){
    //这里写你要处理的行为
    submitLgin.click();
}

2.直接将input的type:submit删除；用js获取form表单元素，用js手动提交

2.thymeleaf模板入门

2.1首先工作

1.加入依赖包（地方：pom.xml）

<!-- thymeleaf -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

2.在html标签里面加入xmlns:th=“http://www.thymeleaf.org”
之前没注意这导致一直无法使用thymeleaf模板，浪费了一段时间

2.2注意事项

都说thymeleaf很简单，但对thymeleaf的理解过程并不很简单，简单的是语法；对此我做些个人理解的总结；

1.thymeleaf主要作用是渲染大片数据；对于那些细小的地方如关注，点赞等地方还是推荐用ajax
2.thymeleaf可以将进行局部刷新，有时为了方便直接在原文中加入th:fragment片段，后端当前网页的片段，注意使用thymeleaf本身不会刷新，我们一般配合ajax进行局部刷新
3.对于th:each是循环当前标签元素而不是循环标签内部

有关thymeleaf主要用法我推荐看这篇博文thymeleaf详细讲解