本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议 》和 《 阿里云开发者社区知识产权保护指引 》。如果您发现本社区中有涉嫌抄袭的内容,填写 侵权投诉表单 进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。
package com.example.demo.thymeleaf;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@Controller
@RequestMapping("/refresh")
public class IndexController {
    @RequestMapping
    public String globalRefresh(Model model) {
        List<Map<String,String>> lists = new ArrayList<>();
        Map<String,String> map = new HashMap<>();
        map.put("author", "曹雪芹");
        map.put("title", "《红楼梦》");
        map.put("url", "www.baidu.com");
        lists.add(map);
        // 用作对照
        model.addAttribute("refresh", "我不会被刷新");
        model.addAttribute("title", "我的书单");
        model.addAttribute("books", lists);
        return "test";
     * 局部刷新,注意返回值
     * @param model
     * @return
    @RequestMapping("/local")
    public String localRefresh(Model model) {
        List<Map<String,String>> lists = new ArrayList<>();
        Map<String,String> map = new HashMap<>();
        map.put("author", "罗贯中");
        map.put("title", "《三国演义》");
        map.put("url", "www.baidu.com");
        lists.add(map);
        model.addAttribute("title", "我的书单");
        model.addAttribute("books", lists);
        // "test"是test.html的名,
        // "table_refresh"是test.html中需要刷新的部分标志,
        // 在标签里加入:th:fragment="table_refresh"
        return "test::table_refresh";
    <title>thymeleaf局部刷新</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
</head>
    <span style="margin:0 auto;font-size: 26px" th:text="${refresh}"></span>
    <button onClick="localRefresh()">点击刷新表格</button>
<!-- 需要局部刷新的部分,设置了th:fragment="table_refresh" -->
<div id="table_refresh" style="text-align: center;margin:0 auto;width: 900px" th:fragment="table_refresh">
    <h1 th:text="${title}"></h1>
    <table width="100%" border="1" cellspacing="1" cellpadding="0">
            <td>Author</td>
            <td>Book</td>
            <td>Url</td>
        <tr th:each="book : ${books}">
            <td th:text="${book.author}"></td>
            <td th:text="${book.title}"></td>
            <td th:text="${book.url}"></td>
    </table>
</body>
<script>
    function localRefresh() {
        // 装载局部刷新返回的页面
        $('#table_refresh').load("/refresh/local");
</script>
</html>