实现左边为菜单树,右边局部载入子界面(.html)左边不需刷新,右边内容动态加载界面。(在springboot ,thymeleaf下运行)
1:jquery的load和iframe方式领导不给使用。
2:可有thymeleaf特有的方式??
···
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就是这个局部刷新的
使用xmlhttp思路感觉可行
1:xmlhttp.open("POST",url,true);
2:$("#content").html(xmlhttp.responseText); (可获html元素代码,通过html()改变内容显示)
xmlhttp.open("POST",url,true);
thymeleaf作为服务端渲染的框架,渲染操作肯定不能在客户端执行。所以你提出第二种疑问是想不通的。可以考虑写原生的dom操作,或者使用如vue来完成局部更新