thymeleaf发请求后端的示例

A：

以下是使用Thymeleaf发起Ajax请求，与后端进行交互的示例：

1. 配置Thymeleaf和Spring MVC。

2. 在HTML页面中引入jQuery库：

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

3. 在HTML页面中添加表单，并使用Thymeleaf变量获取表单提交数据：

<form id="myForm">
    <input type="text" th:name="${username}" placeholder="Username"/>
    <input type="password" th:name="${password}" placeholder="Password"/>
    <button type="submit" th:text="${loginButtonText}">Login</button>
</form>

4. 在JavaScript中为表单提交添加Ajax事件：

$(document).ready(function() {
    $('#myForm').submit(function(e) {
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: '/login',
            data: $(this).serialize(),
            success: function(data) {
                console.log(data);
                // 处理响应数据
            },
            error: function(xhr, textStatus, errorThrown) {
                console.log('Error');
            }
        });
    });
});

5. 在后台控制器中，接收表单提交数据，并返回响应数据：

@PostMapping("/login")
public ResponseEntity<String> login(@RequestParam("username") String username,
                                     @RequestParam("password") String password) {
    // 处理表单提交数据
    // 返回响应数据
    return ResponseEntity.ok("Success");
}