首页thymeleaf如何使用AJAX技术

thymeleaf如何使用AJAX技术

时间: 2023-09-24 08:06:01 浏览: 199

Thymeleaf 是一个服务器端的模板引擎，它本身并没有提供 AJAX 相关的功能，但是可以很方便地与 AJAX 技术结合使用。下面是一个使用 Thymeleaf 和 AJAX 实现异步请求的例子： 1. 在 HTML 文件中，使用 Thymeleaf 的相关语法来渲染页面： ``` <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>Thymeleaf AJAX Demo</title> <meta charset="UTF-8"/> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> </head> <body> <h1 th:text="${message}"></h1> <button id="btn">Click me</button> <div id="result"></div> <script> $(document).ready(function() { $("#btn").click(function() { $.ajax({ url: "/ajax", success: function(result) { $("#result").text(result); } }); }); }); </script> </body> </html> ``` 2. 在控制器中定义一个返回 JSON 数据的请求处理方法： ```java @Controller public class AjaxController { @GetMapping("/ajax") @ResponseBody public String ajax() { return "Hello, AJAX!"; } } ``` 在这个例子中，我们通过 Thymeleaf 渲染了一个包含一个按钮和一个空白 `div` 的页面，当用户点击按钮时，会通过 AJAX 技术向服务器发送一个请求，请求处理方法会返回一个 JSON 格式的字符串 "Hello, AJAX!"，然后将它显示在页面上。

阅读全文