博客

thymeleaf 结合jquery-ajax-load实现模板局部渲染

  • Post author:
  • Post category:其他




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";
    }


参考：



jQuery – AJAX load() 方法


版权声明：本文为ory001原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。