public String h1(Model model, HttpServletRequest request, HttpServletResponse response) throws IOException {
System.out.println(request.getParameter("text"));
List<Good> goods = goodMapper.selectAllGood();
model.addAttribute("goods", goods);
System.out.println("one");
request.setAttribute("hello","one");
return "lyear_pages_doc";
}
<tr th:each="good:${goods}" th:fragment="table_refresh">
<td>
<label class="lyear-checkbox checkbox-primary">
<input type="checkbox" name="ids[]" value="1"><span></span>
</label>
</td>
<td>[[${good.goodId}]]</td>
<td>[[${good.goodName}]]</td>
<td>好,货少</td>
<td>[[${good.surplus}]]</td>
<td>[[${good.goodPrice}]]</td>
<td><font class="text-success">正常</font></td>
<td>
<div class="btn-group">
<a class="btn btn-xs btn-default"
th:href="@{/updata_doc(goodId=${good.goodId},goodName=${good.goodName},surplus=${good.surplus},goodPrice=${good.goodPrice} )}"
title="编辑" data-toggle="tooltip"><i
class="mdi mdi-pencil"></i></a>
<a class="btn btn-xs btn-default" href="#!" title="查看"
data-toggle="tooltip"><i class="mdi mdi-eye"></i></a>
<a class="btn btn-xs btn-default"
th:href="@{deleteGood/} + ${good.goodId}" title="删除"
data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>
</div>
</td>
<td th:text="${hello}">12</td>
</tr>
然后通过ajax进行一个异步请求
function chaxun() {
//console.log(this.valueOf());
var text = $(" #vaId ").val();
if (!isNull(text)) {
$.ajax({
url: "/serch",
type: 'Post',
// async: false,
data: {
'text': text
},
success: function () {
//响应成功之后的回调函数
console.log("响应成功");
}
});
}
}
拿到搜索框的字段,进行一个异步请求,执行带条件的sql将筛选出来的数据再返回给前端,利用thymeleaf中th:frament刷新局部
@PostMapping("/serch")
public String searchGood(HttpServletRequest request, Model model) {
System.out.println("serch请求");
List<Good> goods = goodMapper.selectByGoodName(String.valueOf(request.getParameter("text")));
request.setAttribute("goods",goods);
System.out.println(goods);
//model.addAttribute("goods",goods);
return "lyear_pages_doc::table_refresh";
}
打印了下数据,可以看到sql执行成功并返回数据,但是thymeleaf怎么也渲染不上,没有刷新成为新的数据,希望有大神请教
不明白,对goods的列表绑定为啥要用两个方法h1
,searchGood
分别来加载,
一般分页+搜索(即查询)一个方法就搞定了。
比如,我的是这样
前端:
<div class="row">
<div class="col-md-12 col-xs-12">
<form class="form-inline my-2 my-lg-0" method="get" action="/default/index">
<input class="form-control mr-sm-2" type="search" name="title" placeholder="Search" aria-label="Search"
th:value="${article.title}">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
<hr/>
</form>
</div><!-- end #main-->
</div>
<div class="row mt-3"></div>
<div class="row">
<div class="col-md-8 col-xs-12 " id="main" role="main">
<div id="list_articles">
<article class="post-wrapper" itemscope="" th:each="article:${page?.records}">
<div class="row">
<div class="col-md-12">
<h3>
<a class="title-link" itemprop="url" th:title="${article.Title}"
th:href="'/article/detail/'+${article.getId()}"
th:text="${article.Title}"></a>
</h3>
</div>
<div class="col-md-12">
<div class="post-content" itemprop="articleBody" th:value="${article.Summary}">
</div>
</div>
<div class="col-md-12 post-meta">
<ul class="">
<p>时间:
<time th:datetime="${article.CreateTime}" itemprop="datePublished"
th:value="${article.CreateTime}"></time>
</p>
<li itemprop="author" itemscope="" itemtype="#">作者: <a itemprop="name" href="#"
rel="author">麦子</a></p>
<p>分类: <a href="#">.NET</a></p>
<li itemprop="interactionCount"><a itemprop="discussionUrl" href="#" title="浏览"><i
class="icon-eye-open" th:text="${article.ScanNum}"></i> </a></p>
<li itemprop="interactionCount"><a itemprop="discussionUrl" href="#"
title="赞"><i class="icon-thumbs-up"
th:text="${article.LikeNum}"></i></a>
</p>
<li itemprop="interactionCount"><a itemprop="discussionUrl" href="#" title="评论"><i
class="icon-comment" th:text="${article.CommentNum}"></i></a></p>
<li class="float-right"><a th:href="${article.LinkUrl}"
class="float-right">阅读全文</a></p>
</ul>
</div>
</div>
</article>
</div>
<!--将分页的页面包含-->
<!--<div th:replace="article/pagination :: page"></div>-->
<div style="float: left" th:if="${page.pages>0}">
当前第<span th:text="${page.current}"></span>页,共<span
th:text="${page.pages}"></span>页,总记录数<span th:text="${page.total}"></span>
</div>
<div style="float: right" th:if="${page.pages>0}">
<a th:href="'/default/index?pageNum=1'" th:text="首页" th:if="${page.current>1}"
th:class="page-item"></a>
<a th:href="'/default/index?pageNum=' + ${page?.current-1}" th:text="上一页" th:class="page-item"
th:if="${page.current>1}"></a>
<a th:href="'/default/index?pageNum=' + ${i}"
th:each="i :${#numbers.sequence(1, page.pages)}" th:text="${i}"
th:class="${page.current == i}? 'page-item active' :'page-item' "></a>
<a th:href="'/default/index?pageNum=' +(${page.current+1})" th:text="下一页" th:class="page-item"
th:if="${page.current<page.pages}"></a>
<a th:href="'/default/index?pageNum=' + ${page.pages}" th:class="page-item"
th:if="${page.current<page.pages}">尾页</a>
</div>
</div><!-- end #main-->
</div>
后端:
@RequestMapping("/index")
public ModelAndView Index(
HttpServletRequest request,
Article article,
@RequestParam(value = "pageNum",defaultValue = "0") int pageNum,
@RequestParam(value = "pageSize", defaultValue = "5") int pageSize) {
System.out.println("before:"+article.getTitle());
String title = request.getParameter("title");
System.out.println("after:"+title);
//封装值到AO
ArticleAO ao = new ArticleAO();
ao.setLimit(pageSize);
ao.setPage(pageNum);
//定义一个视图对象名字时index.html 前缀和后缀都有封装,只需要写名字
ModelAndView modelAndView = new ModelAndView("/index");
IPage<ArticleVO> page=articleService.searchByPage(pageNum,pageSize,article.getTitle());
//相当于setAttriute("pageInfo",pageInfo)
modelAndView.addObject("page",page);
modelAndView.addObject("article",article);
return modelAndView;
}
更多可以查看《Spring Boot 实战纪实》教程。
因为我是刚学习这个,做的一个增删改查,进入lyear_pages_doc页面,也就是发送/lyear_pages_doc请求,直接将数据库里全部的商品查出来,做完之后看到有搜索框,然后想做下查询,抱着学习的心态想用点儿thymeleaf和异步处理,没有去在sql层面做改动,然后又写了一个方法,接收一个异步的请求,通过这个请求查询请求数据,然后通过那个th:frament做刷新,可是请求到的数据渲染不到页面,还是新手,不知道为什么。害!
在我不想做的时候,今天早上在又找这个问题的答案的时候,看到thymeleaf异步刷新,通过$.load(url,data,sessusful)
当时一看到我就觉得估计这样的是对的,搜索本来就是想异步实现的,习惯了使用ajax来实现异步请求,改了全世界唯独没有动他,我就转过手来,果断把ajax里改成了这样:
(https://img2022.cnblogs.com/q/2520644/202202/2520644-20220214184301557-2140463504.png)
没错这么一行代码,我想实现的搜索功能实现了。但是我还是像不明白为什么,通过AJAX发出的异步请求,返回过来的数据就渲染不到thymeleaf中,可能ajax只能是实现刷新渲染页面js吧,反正目前我是这样理解的![]