异步加载实现点赞功能($.load 出现post不支持)

异步加载实现点赞功能

需求：

目前有一个需求就是，要实现点击点赞，然后异步刷新，不会导致整个页面的刷新，显示出来有多少个人点赞。如图：

技术要求

采用spring Data Jpa作为持久层来获取数据，采用thymeleaf作为数据引擎，将数据放回到前台。其他技术暂无。

功能拆分

后台逻辑需要有两个方法，一个是重新加载也就是重新获取这个博客的点赞数：

@GetMapping("/getLikeCount/{id}")
public String getLikeCount(@NotNull Model model, @PathVariable Long id){
    model.addAttribute("count",blogService.getBlogLikeCountById(id));
    return "blog :: likeCount";
}

将请求的回来的数据，返回给博客页面的部分片段，也就是异步刷新的位置。

也就是

将数据传回到这里的一个片段中，在这里有一个坑，就是你得在你想要异步刷新的整个外面包裹一层div，然后加上div：fragment，要不数据一直是html的字段，写不到页面上。当然出现html的时候，也有可能是你在后台方法上加了ResponseBody，导致将return 的字符串给返回去了。

有了以上的代码，当页面加载之后，后台请求不到数据，也就是访问不到控制层，需要加这段代码：

<script th:inline="javascript">
    $(function () {
    	//当页面加载完成之后，需要把评论都给加载出来
    	$("#likeInfo").load(/*[[@{/getLikeCount/{id}(id=${blog.id})}]]*/"getLikeCount/6");
	});
</script>

这段代码的功能就是，当页面加载完成后，再去异步请求后台地址为getLikeCount/{id}，然后就完成了获取数据。需要注意的是，在这里如果你要是在$.load()里面不传数据的时候，默认的是get方法想后台请求数据。这就完成了异步刷新的功能。

点击产生的点击事件，完成异步加载

当页面加载完成后，就要完成点击之后，给点赞数加一的功能了，但是不需要刷新整个页面。

let likeFlag = true;

function like(id) {
    console.log(id);
    let icon = $("#i_heart_icon");
    if (likeFlag) {
        if (postLikeOrDisLike(id, likeFlag)) {
            icon.removeClass("outline");
            likeFlag = false;
        }
    } else {
        if (postLikeOrDisLike(id, likeFlag)) {
            icon.addClass("outline");
            likeFlag = true;
        }
    }

}

function postLikeOrDisLike(id, flag) {
    $("#likeInfo").load("/like",{
        blogId: id,
        flag: flag
    },function (responseTxt,statusTxt,xhr) {
        //滚动到最上面的评论
        console.log("请求成功")
    });
}

以上代码的主要功能就是当点击之后，发出postLikeOrDisLike请求，然后再使用$.load()方法请求后台数据，这次因为data有两个分别为blogId和flag的数据，所以后台相应为post请求。这就是使用$.load()的时候，get和post的区别：当data域有数据的时候是post请求，当data域中没有数据的时候就是get请求。具体情况文档

发送点击请求，到后台方法：

@PostMapping("/like")
public String likeBlog(@RequestParam("blogId") Long id,@RequestParam("flag") boolean flag){
    if(flag){
        //+1
        int i = blogService.updateBlog(id);
    }else{
        //—1
        int i =  blogService.cancelLikeBlog(id);
    }
    return "redirect:/getLikeCount/" + id;
}

这一步是最关键的，点击产生的事件，存到数据库中之后，再转发给第一段代码

让他重新查询一遍数据库，并将结果返回给页面。这就形成了一个循环。

到这里，基本功能已经完善。

总结

主要完成了点赞的异步加载，使用$.load()函数，注意点就是，如果你在页面上使用inline模式的js代码，需要$("#likeInfo").load(/[[@{/getLikeCount/{id}(id=${blog.id})}]]/"getLikeCount/6");，但是如果你是外联的js文件下的代码：

$("#likeInfo").load("/like",{
    blogId: id,
    flag: flag
},function (responseTxt,statusTxt,xhr) {
    //滚动到最上面的评论
    console.log("请求成功")
});

直接这样写就行。要不会出现不支持post方法。不信可以试试。踩了一天的坑了。