thymeleaf和ajax的讲解以及代码应用

作者：System 时间：2024年08月13日分类：所有,ajax 字数：1308

Thymeleaf 是一个用于服务端的Java模板引擎，可以处理HTML、XML、JavaScript、CSS等，并在服务端生成模板化的内容。AJAX 是一种在不重新加载页面的情况下与服务器交换数据的技术。

下面是一个使用Thymeleaf和AJAX的简单例子：

假设你有一个HTML页面，使用Thymeleaf模板引擎：




<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Thymeleaf AJAX Example</title>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#myButton').click(function() {
                $.ajax({
                    url: '/greeting',
                    type: 'GET',
                    success: function(data) {
                        $('#greeting').html(data);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <div id="greeting">Loading...</div>
    <button id="myButton">Click me</button>
</body>
</html>

你的控制器可能会返回一个字符串作为AJAX请求的响应：




@Controller
public class MyController {
 
    @GetMapping("/greeting")
    @ResponseBody
    public String greeting(@RequestParam(name="name", required=false, defaultValue="World") String name) {
        return "Hello, " + name + "!";
    }
}

在这个例子中，当用户点击按钮时，一个AJAX请求会发送到/greeting端点。控制器处理请求并返回数据，然后AJAX回调函数更新页面上的#greeting元素的内容。

注意：确保服务器运行环境中已经配置了Thymeleaf和jQuery（或任何其他JavaScript库）。

thymeleaf和ajax的讲解以及代码应用

评论已关闭

推荐阅读