thymeleaf 异步刷新局部块_【Spring】thymeleaf + SpringMVC局部刷新

thymeleaf + SpringMVC局部刷新

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

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

1.load()函数异步刷新

load(url,//请求路径

reqData,//请求的数据

function(response，status){//回调函数

})

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

$(selector).load(url);

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

html代码如下：

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

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

var url = '/blog/ajaxTest';

$('#div1').load(url);

});

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

@RequestMapping("/ajaxTest")

public String test(Model model){

System.out.println("ajaxTest");

List 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和缓存，这个日后再验证吧。

另一个问题：

项目中的顶部导航栏在所有页面中都用到，所以需要单独抽离出来，减少代码冗余。

之前的做法是，在模板文件中写好导航条，在所有页面引入这个模板，然后在所有页面的后台向model中注入导航栏的值，但这样增加了代码量。

目前的解决方案：使用load()进行局部加载，也就是在模板文件中用load函数先进行导航栏数据加载，将加载完的html引入其他页面。这样的好处是不用在每个RequestMapping的model中注入数据。不好的是会多了一次请求。