SpringBoot技术升级 thymeleaf===html+css+js+Ajax

在Spring Boot项目中使用Thymeleaf模板引擎结合HTML、CSS、JavaScript和Ajax技术，可以创建动态的Web界面。以下是一个简单的例子，展示了如何使用这些技术。

首先，确保你的pom.xml中包含了Spring Boot和Thymeleaf的依赖：




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

创建一个Controller来处理请求并返回Thymeleaf模板：




@Controller
public class MyController {
 
    @GetMapping("/greeting")
    public String greeting(Model model) {
        model.addAttribute("name", "World");
        return "greeting"; // 对应src/main/resources/templates/greeting.html
    }
}

创建Thymeleaf模板greeting.html，并结合HTML、CSS、JavaScript和Ajax：




<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Greeting</title>
    <style>
        .hidden { display: none; }
    </style>
</head>
<body>
 
<div>
    <input type="text" id="name" placeholder="Enter your name" />
    <button id="greetBtn">Greet</button>
</div>
 
<div id="greeting" class="hidden">
    <p th:text="'Hello, ' + ${name} + '!'"></p>
</div>
 
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function() {
        $('#greetBtn').click(function() {
            var name = $('#name').val();
            $.ajax({
                url: '/greeting',
                data: { name: name },
                type: 'GET',
                success: function(data) {
                    $('#greeting').removeClass('hidden');
                }
            });
        });
    });
</script>
 
</body>
</html>

在这个例子中，我们使用了Thymeleaf的th:text来动态插入文本，结合jQuery和Ajax实现了前后端的异步通信。当用户点击按钮时，Ajax会向后端发送一个GET请求，并带上用户输入的名字，后端处理请求后，Thymeleaf会使用响应数据更新页面。

SpringBoot技术升级 thymeleaf===html+css+js+Ajax

评论已关闭

推荐阅读