thymleaf的基本使用及js向后台请求数据

最新推荐文章于 2024-07-24 11:38:53 发布

零戚

最新推荐文章于 2024-07-24 11:38:53 发布

阅读量751

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_45689158/article/details/124980718

版权

thymleaf的基本使用

添加上述内容可以出现提示

对js代码的引入

1.对超出字数的部分进行省略，以及鼠标放置到上面显示完整字符

<td th:text="${#strings.abbreviate(blog.content,10)}" th:title="${blog.content}" width="200"></td><br>

2.遍历输出后端内容

<table>
    <tr>
        <td width="200">博客id</td>
        <td width="200">标题</td>
        <td width="200">类别</td>
        <td width="200">内容</td>
    </tr>
<br>
    <tr th:each="blog,iter:${@blogs.findAllBlog() }" th:value="${blog}"> #此处为直接调用service层的代码
        <td th:text="${blog.id}" width="200"></td>
        <td th:text="${blog.title}" width="200"></td>
        <td th:text="${blog.type}" width="200"></td>
        <td th:text="${#strings.abbreviate(blog.content,10)}" th:title="${blog.content}" width="200"></td><br>
    </tr>
</table>

3.实现分页

后端代码

@RequestMapping("/page") //分页显示
public String page(@PageableDefault(page=0,size=1) Pageable pageable, Model model){
    Page<Blog> blogs= blogRepository.findAll(pageable);
    model.addAttribute("blogs",blogs);
    return "index1";
}

前端代码

<table>
    <tr>
        <td width="200">博客id</td>
        <td width="200">标题</td>
        <td width="200">类别</td>
        <td width="200">内容</td>
    </tr>
    <br>
<tr th:each="blog:${blogs}">
        <td th:text="${blog.id}" width="200"></td>
        <td th:text="${blog.title}" width="200"></td>
        <td th:text="${blog.type}" width="200"></td>
        <td th:text="${blog.content}" width="200"></td><br>
</tr>
</table>

<a th:href="@{/page(page=${blogs.number-1})}" th:unless="${blogs.first}">前一页</a>
<a th:href="@{/page(page=${blogs.number+1})}" th:unless="${blogs.last}">后一页</a>

4.js向后台请求数据

  function deleted(this1)
    {
        var value = $(this1).parent().parent().find("td");
        var data="id="+value.eq(0).text();
        $.ajax({
            type: 'POST',
            url: "/deleteStudent",
            data: data,
            success : function(data) {
                alert("删除成功,请刷新后查看");
                window.location.href="/get_Student"
            },
            error: function() {
                alert("出现未知异常");
            }
        });
    }

5.thymleaf的a标签使用