2021-08-31

spring boot 整合thymeleaf在使用model前端取值的一些坑

1，在元素块中取值时，需要对放在model中的j进行判空操作

<th:block th:if="${jsonResult != null}">
                    <input th:id="json-input" type="hidden" th:value="${jsonResult}">
                    <tr th:each="blog,bstat :${jsonResult.data.data}">
                        <td th:text="${bstat.count}"></td>
                        <td th:text="${blog.title}">博客标题</td>
                        <td th:text="${blog.type.name}">类型</td>
                        <td th:text="${blog.recommend} ? '是':'否'">是</td>
                        <td th:text="${blog.published} ?'发布':'草稿'">发布</td>
                        <td th:text="${#dates.format(blog.updateDate,'yyyy-MM-dd')}"></td>
                        <td>
                            <a href="#" th:href="@{/admin/blogInput/{blog}(blog=${blog})}" class="ui mini teal basic button">编辑</a>
                            <a href="#" th:href="@{/admin/deleteBlog/{bid}(bid=${blog.id})}"  onclick="return confirm('确定要删除该吗？三思啊! 删了可就没了！')" class="ui mini red basic button">删除</a>
                        </td>
                    </tr>
                </th:block>

2，在javascript代码块中使用取值时，在使用’[[$jsonResult]{]}^{\prime }或[[${jsonResult}]]无效后，可以使用一个隐藏的input保存jsonResult,
然后在javascript代码块中根据这个隐藏的input去取值

3补充：
在元素onclick事件中传值使用$jsonResult失败,他将${jsonResult}当成一个字符串，无法取值，原因未知

onclick('${jsonResult}')

解决：在button或者a链接中自定义属性，再在函数中取得该值

<div class="ui button item"><a  th:id="pre-btn" onclick="ajaxfunc(this)" th:attr="data-curr=${jsonResult.prePage}">上一页</a></div>

在ajaxfunc函数中取得model中jsonResult.prePage的值

function ajaxfunc(curr){
    var currentPage=$(curr).data("curr");
    $.ajax({
        url:"/admin/listBlog",
        type:"get",
        data:{
            "keytitle":keytitle,
            "keytid":keytid,
            "keyrecommend":keyrecommend,
            "currentPage":currentPage,
        },
        success:function (res) {
            $('#blogtable').html(res);
        }
    })
}

4 ，在使用ajax加jquery动态获取数据时的一些坑

<a href="javascript:void(0)" class="ui mini teal basic button" th:id="edit-btn" th:attr="data-tname=${type.name},data-tid=${type.id}" onclick="opm(this)">编辑</a>
                        <a href="javascript:void(0)" class="ui mini red basic button" th:id="delete-btn" th:attr="data-tid=${type.id}" onclick="ajaxfunc(this)">删除</a>

编辑和删除按钮是在一个fragment中并由ajax动态获取的，倘若在该页面使用jquery选择器去定义这两个按钮的点击事件是行不通的。
缘由大概为异步。