qq_33997249
qq_33997249
采纳率14.3%
2018-03-07 09:50 阅读 12.4k

thymeleaf 局部刷新,类似iframe嵌套效果。

10

实现左边为菜单树,右边局部载入子界面(.html)左边不需刷新,右边内容动态加载界面。(在springboot ,thymeleaf下运行)
1:jquery的load和iframe方式领导不给使用。
2:可有thymeleaf特有的方式??

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

5条回答 默认 最新

  • qq_19305383 qq_19305383 2018-03-07 11:15

    ···

    HTML代码


                   </div>
      </div>
    ···· 
    
    ····
       控制器返回
        @GetMapping("comments/{blogId}")
    public String comments(@PathVariable Long blogId , Model model){
        model.addAttribute("comments",commentService.listCommentById(blogId) );
        return "blog :: commentList";
    }
    
    ····
    ···
           这个
          $('#commentpost-btn').click(function () {
           var boo = $('.ui.form').form('validate form');
           if (boo) {
               console.log('校验成功');
               postData();
           } else {
               console.log('校验失败');
           }
    
       });
    
    
    
    
                 /*-------------发送请求--------------------------*/
       function postData() {
           $("#comment-container").load(/*[[@{/comments}]]*/"",{
               "parentComment.id" : $("[name='parentComment.id']").val(),
               "blog.id" : $("[name='blog.id']").val(),
               "nickname": $("[name='nickname']").val(),
               "email"   : $("[name='email']").val(),
               "content" : $("[name='content']").val()
           },function (responseTxt, statusTxt, xhr) {
    

    // $(window).scrollTo($('#comment-container'),500);
    clearContent();
    });
    }
    ···

    你可以试试 我用thymeleaf就是这个局部刷新的
    
    点赞 评论 复制链接分享
  • qq_19305383 qq_19305383 2018-03-07 11:17

    图片说明

    点赞 评论 复制链接分享
  • qq_33997249 qq_33997249 2018-03-08 06:09

    使用xmlhttp思路感觉可行
    1:xmlhttp.open("POST",url,true);
    2:$("#content").html(xmlhttp.responseText); (可获html元素代码,通过html()改变内容显示)

    点赞 评论 复制链接分享
  • qq_38819340 kobeBryantOscar 2018-03-08 07:24

    xmlhttp.open("POST",url,true);

    点赞 评论 复制链接分享
  • farYang farYang 2018-03-10 18:47

    thymeleaf作为服务端渲染的框架,渲染操作肯定不能在客户端执行。所以你提出第二种疑问是想不通的。可以考虑写原生的dom操作,或者使用如vue来完成局部更新

    点赞 评论 复制链接分享

相关推荐