首页 新闻 搜索 专区 学院

刚学习springboot,就用springboot做了一个简单的增删改查,想在页面加一个简单的搜索,但是数据怎么都渲染不上!

0
悬赏园豆:10 [待解决问题]

登录之后进入主页面直接做查询功能,将数据库里面有的商品全部查出来

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

通过th:each循环,将数据展示出来

  <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怎么也渲染不上,没有刷新成为新的数据,希望有大神请教

小先生(JokerSir)的主页 小先生(JokerSir) | 菜鸟二级 | 园豆:236
提问于:2022-02-13 09:53
< >
分享
所有回答(2)
0

不明白,对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 实战纪实》教程。

智客工坊 | 园豆:1269 (小虾三级) | 2022-02-13 15:51

因为我是刚学习这个,做的一个增删改查,进入lyear_pages_doc页面,也就是发送/lyear_pages_doc请求,直接将数据库里全部的商品查出来,做完之后看到有搜索框,然后想做下查询,抱着学习的心态想用点儿thymeleaf和异步处理,没有去在sql层面做改动,然后又写了一个方法,接收一个异步的请求,通过这个请求查询请求数据,然后通过那个th:frament做刷新,可是请求到的数据渲染不到页面,还是新手,不知道为什么。害!

支持(0) 反对(0) 小先生(JokerSir) | 园豆:236 (菜鸟二级) | 2022-02-13 17:15
0

在我不想做的时候,今天早上在又找这个问题的答案的时候,看到thymeleaf异步刷新,通过$.load(url,data,sessusful)当时一看到我就觉得估计这样的是对的,搜索本来就是想异步实现的,习惯了使用ajax来实现异步请求,改了全世界唯独没有动他,我就转过手来,果断把ajax里改成了这样:

(https://img2022.cnblogs.com/q/2520644/202202/2520644-20220214184301557-2140463504.png)

没错这么一行代码,我想实现的搜索功能实现了。但是我还是像不明白为什么,通过AJAX发出的异步请求,返回过来的数据就渲染不到thymeleaf中,可能ajax只能是实现刷新渲染页面js吧,反正目前我是这样理解的![]

小先生(JokerSir) | 园豆:236 (菜鸟二级) | 2022-02-14 18:43
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册