JS 点赞与取消点赞功能

BirdMan98

已于 2022-07-07 19:21:53 修改

阅读量1.4k

点赞数 1

文章标签： java ajax js jquery html

于 2020-03-01 15:10:12 首次发布

本文链接：https://blog.csdn.net/weixin_41405524/article/details/104592703

版权

效果

在这里插入图片描述

JSON数据

{"author":"hello","content":"如题所示，在springboot中controller中的参数传递可
以分为这么几类\r\n1.get请求中url传参问题\r\n  通常我们是通过固定的url格式携
带参数，这里要注意的是后台获取参数时要在参数前添加@PathVarable注解指
定接收数据的参数，同时要注意参数名要和url中指定的参数名一致\r\n2.post请
求中，post请求体参数传递问题\r\n  通常这种方式获取的请求一般是接收表单参
数，这里要注意后台获取参数时要在参数前添加@RequestParam注解指定接收
数据的参数，同时也要注意参数名要和表单中name属性一
致","createTime":1582804610064,"editTime":1582973718749,"id":4,"liked":47,"
title":"springboot中controller参数传递问题","viewed":96}

JS

    var index = 0;
    $("#like").click(function () {
        var bid = $("#bid").val();
        var status;
        if (index == 0) {
            status = "取消点赞";
            index = 1;
        } else if (index == 1) {
            status = "点赞";
            index = 0;
        }
        $.ajax({
            url:"/blog/like",
            type:"get",
            data:{id:bid,index:index},
            dataType:"json",
            success: function (json) {
            }
        });
        $(this).attr("value", status);
    });

HTML

<li>
    <input type="button" id="like" style="border: none;
    height: 30px;padding: 5px 10px; margin-top: -5px;
    float: left;margin-right: 10px;font-weight: bolder" 
    value="点赞"/>
</li>

Controller

    @GetMapping("/like")
    @ResponseBody
    public String like(Long id,int index) {
        Blog blog = blogDao.getOne(id);
        if (index == 1) {
            System.out.println("like");
            int like = blog.getLiked()+1;
            blog.setLiked(like);
        } else if (index == 0) {
            System.out.println("unlike");
            if (blog.getLiked() <= 0) {
                blog.setLiked(0);
            } else {
                int like = blog.getLiked()-1;
                blog.setLiked(like);
            }
        }
        blogDao.save(blog);
        Blog b1 = blogDao.getOne(id);
        System.out.println(b1);
        String json = JSON.toJSONString(b1);
        return json;
    }