如果使用JSP实现页面局部更新动画，还要把代码抽取出来放到一个新的jsp文件中，但是用thymeleaf就很简单了。
先看下要实现的功能。
在输入框中输入名字，在下方动态显示。
在实际应用中实现页面动态加载的话，可以相应的把显示名字的部分替换成要更新的部分即可。例如实现分页的时候，只刷新列表部分。
index.html
load：ajax请求。具体用法参考官方文档。th:fragment：定义一个代码片段。实现局部更新需要用。
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script th:src="@{js/jquery-3.4.1.min.js}"></script>
</head>
<body>
<div>请输入你的名字：<input type="text" name="name" id="name"><br><button id="btn">确定</button></div>
<div id="did" th:text="${name}" th:fragment="div1">
无信息
</div>
<script>
$("#btn").click(function () {
console.log("click")
$("#did").load("/hello",{name : $("#name").val()})
});
</script>
</body>
</html>
HelloController
index::div1：index为视图名称（即响应资源的文件名字）。div1为html中定义的代码片段的名字。表示返回index这个文件中的div1代码片段。
package cn.jxj4869.thymeleafdemo.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class HelloController {
@RequestMapping("/hello")
public String hello(String name,Model model){
model.addAttribute("name",name+"你好");
return "index::div1";
}
}