thymeleaf 结合jquery-ajax-load实现模板局部渲染
一、jQuery - AJAX load() 方法
语法
$(selector).load(URL,data,callback);
示例
$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
$('#economiesSummaryContainer').load(ctx + "economic/summaryCardGroup",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success") {
console.log("外部内容加载成功!");
}
if(statusTxt=="error") {
console.log("Error: "+xhr.status+": "+xhr.statusText);
}
});
二、thymeleaf 模板
economicOperationAnalysis.html片段容器
<div id="economiesSummaryContainer"></div>
economicOperationAnalysisInclude .html片段
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
</head>
<body>
<div th:fragment="summaryCardGroup" class="center-top clearfix" id="economiesSummary">
<div class="c-box mr50">
<div class="num-tit">入驻企业数(户)</div>
<div class="num-con" th:text="${totalRevenue}"></div>
</div>
<div class="c-box mr50">
<div class="num-tit">税收总额(万元)</div>
<div class="num-con" th:text="${totalTaxes}">
</div>
</div>
<div class="c-box">
<div class="num-tit">社会消费品零售总额(万元)</div>
<div class="num-con" th:text="${totalProfits}"></div>
</div>
</div>
</body>
</html>
说明：渲染结果为
<div class="center-top clearfix" id="economiesSummary">元素及其内容，包含class、属性等
三、controller控制层
@GetMapping("/economicOperationAnalysis")
public String economicOperationAnalysis(Model model)
{
model.addAttribute("superMapProperties", superMapProperties);
return "economic/economicOperationAnalysis";
}
@GetMapping("/summaryCardGroup")
public String popSummaryWindow(Model model)
{
final HashMap<Object, Object> data = new HashMap<>();
data.put("totalRevenue", 182345);
data.put("totalTaxes", 1012322);
data.put("totalProfits", 512322);
model.addAttribute("data", data);
return "economic/economicOperationAnalysisInclude :: summaryCardGroup";
}
424
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
