牛客网高级项目课前端 点赞点踩 错误 解决办法

在做牛客高级项目，使用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。

后端关键代码如下，应该大家都差不多吧....