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

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

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

发布了24 篇原创文章 · 获赞 3 · 访问量 1301

猜你喜欢

转载自blog.csdn.net/qinian_ztc/article/details/104820068
今日推荐