【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" 注意返回值是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中注入資料。不好的是會多了一次請求。