在做牛客高级项目,使用redis实现点赞点踩功能时,发现前端点赞点踩按钮并未有向后端提交请求。
百度找寻答案无果,好多同志遇到了同样的问题。
没办法,看来只能自己解决了,白嫖就是得多花点功夫,未尝也不是一件好事。
也给后来遇到问题的朋友提供一点经验。
对velocity还不太熟悉,不得不拿出为数不多的js的家底来试试,○| ̄|_。
在detail页面首部引入jquery,我的静态资源文件夹下正好有这个jquery.js。(路径要改成你自己的)
<script type="text/javascript" src="../scripts/main/jquery.js" ></script>
下面我们要进行点赞和点踩的ajax请求编写,需要向后端传评论的id即commentId。
修改一下代码,添加一个评论id的埋点,同时记录每个评论在当前页面的索引,方便后面修改赞进行选择渲染,如下图,99行是我添加的评论id埋点,加上class=“comid”;92行中的$foreach.count是在foreach迭代中的当前index,它从1开始。
在页面尾部添加<script></script>脚本,截图和代码如下
<script>
$(".up").click(function () {
var index =$(this).attr("index")-1;
console.log("当前是第几个评论"+index);
$.ajax({
url: "/like", //请求的url地址
dataType: "json", //返回格式为json
async: true,//请求是否异步,默认为异步,这也是ajax重要特性
data: {"commentId": $(this).find(".comid").val()}, //参数值
type: "POST", //请求方式
success: function (req) {
console.log(req.msg);
if (req.code == 0) {
$(".up").find(".count").eq(index).html(req.msg);
}
}
})
})
</script>
上面只是赞的代码,踩的代码类似添加,这里就不赘述了。
这里后端给前端返回req中包含一个code状态码,和当前点赞数count。
后端关键代码如下,应该大家都差不多吧....