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

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

5个回答

···

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_33997249
qq_33997249 这种还是基于load方式局部元素加载新界面元素啊!会出现网页上点击回退及刷新异常,还有缓存问题。(我主要应用场景是左边的菜单栏信息不刷新的,而右边为操作界面。用户操作操作过程中load可能使用很多次。)
一年多之前 回复

图片说明

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

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

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

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!