Thymeleaf基本使用方法及注意事项

Thymeleaf基本使用方法及注意事项

 

 

数据的基本展示

<span id="oppoName" th:text="${oppo.oppoName}">xxx</span>

 

页面效果如下：

 

---

 

controler返回集合的遍历（以list为例）

• 获取集合的大小

<span>您负责的商机共</span>

<span style="font-size: 26px;font-weight: bold;color: #fc6f45;" th:text="${oppoList.size()}">x</span>

<span>个</span>

 

页面效果如下：

 

---

 

• 遍历集合

<div class="card" th:each="oppoList:${oppoList}">
    <div class="card-head">
        <span>商机名称：</span>
        <span th:text="${oppoList.oppoName}">区域一</span>
    </div>
    <div class="card-body detailContent">
        <div class="row">
            <div class="col-md-4 message-group">
                <span class="labelSapn">客户名称：</span>
                <span class="contentSpan" th:text="${oppoList.custName}">x</span>
            </div>
            <div class="col-md-4 message-group">
                <span class="labelSapn">行业：</span>
                <span class="contentSpan" th:text="${oppoList.industry}">x</span>
            </div>
        </div>
    </div>
</div>

 

页面效果如下：

 

---

 

 

在JavaScript中使用Thymeleaf标签

 

首先需要在<script th:inline="javascript"></script>中声明内联，才可以在js中使用。

以在Ajax中获取为例。

<script th:inline="javascript">
    function insertAjax() {
        var oppoId = $("#oppoId").val()
        var oppoName = [[${oppo.oppoName}]]
        $.ajax({
            //url路径
            url: "/team/insert",
            data: {"oppoId": oppoId,
                "oppoName":oppoName},
            //提交方式
            type: "post",
            //返回值类型
            // dataType: "json",
            //异步提交是否开启
            async: false,//关闭异步请求
            //请求成功后的回调函数
            success: function (pager) {
                alert("添加成功！");
                loadData();
            },
            //出现错误或者异常时的处理方法
            error: function () {
                console.log("查询出错")
            }
        });
    }
</script>