【Spring】thymeleaf + SpringMVC局部刷新

thymeleaf + SpringMVC局部刷新

之前用thymeleaf一直只是在页面加载的时候利用thymeleaf的标签取值，而ajax加载的数据则需要使用js添加到html中，今天因为其它框架而联想到thymeleaf中应该也可以局部动态刷新。于是百度并测试一番，现总结如下：

使用两种方式达到异步刷新：

1.load()函数异步刷新

load(url,//请求路径
        reqData,//请求的数据
        function(response，status){//回调函数

        })           

如果只是简单的获取数据并加载只需要

$(selector).load(url);           

例如，在页面中需要动态加载一个列表：

html代码如下：

<div id="div1" th:fragment="div1">
        <div th:if="${aa} ne null">
            <ul th:each="a : ${aa}">
                <li th:text="${a}"></li>
            </ul>
        </div>
    </div>           

其中fragment可以理解为一个代码模板，thymeleaf可以根据这个进行定位。

js如下(注意需要引入jquery)：

<script>
        $('#btn').click(function () {
            var url = '/blog/ajaxTest';
            $('#div1').load(url);

        });
    </script>           

前端这样就完成了，不需要在js中写动态生成ul的代码。接下来是后端代码。

@RequestMapping("/ajaxTest")
    public String test(Model model){
        System.out.println("ajaxTest");
        List<String> list = new ArrayList<>(10);
        for(int i=0;i<10;i++){
            list.add("hello"+i);
        }
        model.addAttribute("aa",list);
        return "test::div1";
    }           

注意返回值是

test::div1

，test是视图名称（html文件名称）,div1是fragment的名称。这样就只是填充div1的数据，而不用刷新整个页面，达到动态刷新的目的。

当我们点击按钮时，10个li就添加到了html了。

这样做的好处是：不用在js里面写生成html的代码，使得js很简洁，并且不容易出错。

这样做的坏处是如果需要添加额外的css样式则不方便，并且动态生成的html是在服务器端完成的，无疑会增加服务器的负载（虽然影响非常小），也会增加返回的数据量，因为返回的是html而不仅仅是数据。

2.使用ajax异步刷新

ajax本来就是异步的，这里所说的异步是指异步刷新局部html，不单单只是异步请求数据。js代码如下，其他代码不变：

$('#btn').click(function () {
        var url = '/blog/ajaxTest';
        $.ajax({
            url: url,
            type: 'get',
            data: {
                a:'123'
            },
            success: function (data) {
                $('#div1').html(data);
            }
        })
    })           

在请求成功的回调函数success中向元素写入html，同样达到局部刷新的目的。

一般我们用load函数即可，至于有人说load函数会影响页面back和缓存，这个日后再验证吧。

另一个问题：