thymeleaf的使用和小结

thymeleafJavaScript在前后端交互中获取后端值

在JavaScript中,可以通过Thymeleaf的属性绑定来获取后端的值。Thymeleaf会将后端传递的数据绑定到HTML模板中的特定属性上,然后你可以使用JavaScript来读取这些属性的值。案例演示如下:

  • 在后端(Java)中,将数据传递给前端:
java 复制代码
model.addAttribute("message", "Hello, Thymeleaf!");
  1. 方式1:
    通过将数据绑定到HTML元素的特定属性上,然后使用JavaScript获取该元素,并读取其属性值。在这个例子中,我们将数据绑定到div元素的text属性上,然后使用getElementById方法获取该元素并读取其textContent。
  • 在HTML模板中,使用Thymeleaf属性绑定将数据绑定到HTML元素上:
java 复制代码
<div th:text="${message}" id="message"></div>
  • 在JavaScript中,使用getElementById或querySelector等方法获取绑定了数据的HTML元素,并读取其值
java 复制代码
* javascript
var messageElement = document.getElementById("message");
var message = messageElement.textContent;
console.log(message);  // 输出:Hello, Thymeleaf!
  1. 方式2
    在内联的JavaScript代码中直接使用Thymeleaf表达式获取后端的值。在这个例子中,我们使用Thymeleaf的th:inline属性将JavaScript代码标记为内联模式,并使用[[${message}]]来获取后端传递的值。
java 复制代码
<script th:inline="javascript">
	var message = [[${message}]];
	console.log(message);  // 输出:Hello, Thymeleaf!
</script>

hymeleaf中前后端数据交互小结

  1. 引入静态资源:th:href或th:scr+@{/从static目录开始}
java 复制代码
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link th:href="@{/iamges/favicon.ico}" type="image/x-icon"/>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <meta charset="UTF-8">
    <title>书籍管理</title>
</head>
  1. 前端将数据绑定到后端对象:*{对象属性},前端引用后端数据${对象属性}
java 复制代码
<div class="form-group">
    <label for="book_name" class="col-sm-2 control-label">书名:</label>
    <div class="col-xs-4">
        <input type="text" class="form-control" id="book_name" 
               name="name" th:value="${book.name}" th:field="*{book.name}"/>
    </div>
</div>

3.后端将数据传入前端 ModelMap(由框架提供),前端使用${对象属性}

java 复制代码
@RequestMapping(value = "/create",method = RequestMethod.GET)
public String createBookForm(ModelMap map){
    map.addAttribute("book",book);
    map.addAttribute("action","create");
    return BOOK_FORM;
}

4.表单提交的注意点。

  1. action:表单中的内容提交给哪个页面进行处理,可能的取值:URL

  2. input元素: 输入框,由type决定类型。

  3. 触发提交的动作:

HTML DOM submit() 方法。

type=submit

button

相关推荐
天水幼麟14 分钟前
动手学深度学习-学习笔记(总)
笔记·深度学习·学习
小小小小宇1 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊1 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习2 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖2 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
天水幼麟2 小时前
动手学深度学习-学习笔记【二】(基础知识)
笔记·深度学习·学习
OEC小胖胖3 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
沧海一笑-dj3 小时前
【51单片机】51单片机学习笔记-课程简介
笔记·学习·51单片机·江科大·江科大学习笔记·江科大单片机·江科大51单片机
行云&流水3 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐3 小时前
零基础学HTML和CSS:网页设计入门
前端·css