springBoot整合thymeleaf

最新推荐文章于 2025-06-18 16:06:49 发布

ruiguang21

最新推荐文章于 2025-06-18 16:06:49 发布

阅读量247

点赞数

CC 4.0 BY-SA版权

分类专栏： springboot

本文链接：https://blog.youkuaiyun.com/ruiguang21/article/details/78899581

springboot 专栏收录该内容

29 篇文章

订阅专栏

pom.文件

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

<dependency>
<groupId>net.sourceforge.nekohtml</groupId>
<artifactId>nekohtml</artifactId>
<version>1.9.21</version>
</dependency>

配置文件

spring.thymeleaf.mode=LEGACYHTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
#\u5F00\u53D1\u65F6\u5173\u95ED\u7F13\u5B58,\u4E0D\u7136\u6CA1\u6CD5\u770B\u5230\u5B9E\u65F6\u9875\u9762
spring.thymeleaf.cache=false

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>

<script th:src="@{/js/jquery-3.0.0.min.js}"></script>
<style>
table tr th,
table tr td {
width: 100px;
}
</style>
</head>

<body>
<div>
<table border="1">
<thead id="tr">
</thead>
<tbody id="body">

</tbody>
</table>
<script type="text/javascript">
$.ajax({
url: "http://localhost:8080/sbsys/testdao",
type:"get",
dataType:'json',
success:function (data) {
console.log(data);
console.log(data.columns);
//循环表头的标题
var str="<tr>" +
"<td>"+data.columns[1]+"</td>" +
"<td>"+data.columns[2]+"</td>" +
"<td>"+data.columns[0]+"</td>" +
"<td>"+data.columns[4]+"</td>" +
"<td>"+data.columns[3]+"</td>" +
"<td>"+data.columns[5]+"</td>" +
"</tr>";

$("#tr").html(str);
//循环表的内容
console.log(data.rows);
var table="";
for(var j=0;j<data.rows.length;j++)
{

table+="<tr>" +
"<td>"+data.rows[j].id+"</td>" +
"<td>"+data.rows[j].keyword+"</td>" +
"<td>"+data.rows[j].cid+"</td>" +
"<td>"+data.rows[j].parentA_cid+"</td>" +
"<td>"+data.rows[j].parentA_Name+"</td>" +
"<td>"+data.rows[j].parentB_Name+"</td>" +
"</tr>";
}
$("#body").html(table);
},
error:function (data) {
console.log(data);
}
})



</script>


</div>
</body>

</html>