thymeleaf和JavaScript在前后端交互中获取后端值
在JavaScript中，可以通过Thymeleaf的属性绑定来获取后端的值。Thymeleaf会将后端传递的数据绑定到HTML模板中的特定属性上，然后你可以使用JavaScript来读取这些属性的值。案例演示如下：
- 在后端（Java）中，将数据传递给前端：
model.addAttribute("message", "Hello, Thymeleaf!");
- 方式1：
通过将数据绑定到HTML元素的特定属性上，然后使用JavaScript获取该元素，并读取其属性值。在这个例子中，我们将数据绑定到div元素的text属性上，然后使用getElementById方法获取该元素并读取其textContent。
- 在HTML模板中，使用Thymeleaf属性绑定将数据绑定到HTML元素上：
<div th:text="${message}" id="message"></div>
- 在JavaScript中，使用getElementById或querySelector等方法获取绑定了数据的HTML元素，并读取其值
* javascript
var messageElement = document.getElementById("message");
var message = messageElement.textContent;
console.log(message); // 输出：Hello, Thymeleaf!
- 方式2
在内联的JavaScript代码中直接使用Thymeleaf表达式获取后端的值。在这个例子中，我们使用Thymeleaf的th:inline属性将JavaScript代码标记为内联模式，并使用[[${message}]]来获取后端传递的值。
<script th:inline="javascript">var message = [[${message}]];console.log(message); // 输出：Hello, Thymeleaf!
</script>
hymeleaf中前后端数据交互小结
- 引入静态资源：th:href或th:scr+@{/从static目录开始}
<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>
- 前端将数据绑定到后端对象：*{对象属性}，前端引用后端数据${对象属性}
<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(由框架提供),前端使用${对象属性}
@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