springmvc + thymeleaf中ajax get请求

最新推荐文章于 2022-10-01 08:53:55 发布

原创最新推荐文章于 2022-10-01 08:53:55 发布 · 7.6k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#java #ajax

java 同时被 2 个专栏收录

41 篇文章

订阅专栏

ajax

1 篇文章

订阅专栏

本文介绍如何在Spring Boot和Thymeleaf环境中使用Thymeleaf碎片模板结合Ajax实现动态加载数据列表。通过一个具体示例展示了前端页面结构、Ajax请求定义及Java后端处理逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ajax请求简单实现

在spring boot + thymeleaf环境下，利用thymeleaf的fragments模板，实现Ajax请求．

主页面block

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8" />
    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="js/ajax1.js" type="text/javascript"></script>
    <title>Title</title>
</head>

<body>
    Hello World!
    <div class="search-block">
        <input type="text" id="searchSurname" name="searchSurname" />
        <br />
        <label for="searchSurname" th:text="#{search.label}">Search label:</label>
        <button id="searchButton" name="searchButton" onclick="retrieveGuests()" type="button" th:text="#{search.button}">Search button</button>
    </div>
        <div id="resultsBlock">

        </div>
</body>

</html>

当点击button::onclick事件，触发在ajax1.js中定义的retrieveGuests()。

ajax请求定义

// ajax1.js
function retrieveGuests() {
    var url = '/users';

    $("#resultsBlock").load(url);
}

触发ajax请求，并且请求结果放入到#resultsBlock标签中。

java端后台实现请求处理

    @RequestMapping(value = "/users", method = RequestMethod.GET)
    public String showGuestList(Model model) {
        model.addAttribute("guests", userService.getUserLists());

        return "fragments/sample :: resultsList";
    }

定义fragments模板

当请求返回后，会调用fragments/sample::resultsList模板，模板如下:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
    </head>

    <body>
        <div th:fragment="resultsList" th:unless="${#lists.isEmpty(guests)}" id="results-block">
            <table>
                <thead>
                    <tr>
                        <th th:text="ID">Id</th>
                        <th th:text="username">Surname</th>
                        <th th:text="loginName">Name</th>
                        <th th:text="workerId">Country</th>
                    </tr>
                </thead>
                <tbody>
                    <tr th:each="guest : ${guests}">
                        <td th:text="${guest.uid}">id</td>
                        <td th:text="${guest.username}">surname</td>
                        <td th:text="${guest.loginName}">name</td>
                        <td th:text="${guest.workerId}">country</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>