form表单与thymeleaf入门

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详细讲解