ssm利用ajax实现用户点击关注|取消关注

ajax是直接上手，昨天才接触，本博文只是解决了关注功能，如有其他错误，请指出。

jsp前端代码

<div class="username" id="username">
                <h5>${article.username}
                    <c:if test="${article.userid  != userid}">
                        <button type="button"
                                class="layui-btn layui-btn-sm layui-btn-warm layui-btn-radius" id="addAttention" style="display: none">关注TA
                        </button>
                        <button type="button" class="layui-btn layui-btn-sm layui-btn-warm layui-btn-radius"
                                id="delAttention" style="display: none">取消关注
                        </button>
                    </c:if></h5>
                <a href="myHomepage?userid=${article.userid}">TA的个人主页</a>
                <input hidden id="beuserid" value="${article.userid}">
            </div>

ajax代码：

<script>
    $(document).ready(function () {
        beuserid = parseInt($("#beuserid").val());
        alert(beuserid);
        //是否关注了该帖子的用户
        $(function () {
            $.ajax({
                type: "Post",
                url: "isAttention/" + beuserid,
                contentType: "charset=utf-8",
                dataType: "json",
                success: function (result) {
                    if (result.isAttention == 10) {
                        $('#addAttention').show();
                    }
                    if (result.isAttention == 11) {
                        $('#delAttention').show();
                    }
                },
                error: function (data) {
                    alert("是否关注--失败");
                }
            });
        });
        
        //点击关注
        $("#addAttention").click(function () {
            $('#addAttention').hide();
            $.ajax({
                type: "Post",
                url: "addAttention/" + beuserid,
                contentType: "charset=utf-8",
                dataType: "json",
                success: function (result) {
                    if (result.resultCode == 200) {
                        $('#delAttention').show();
                    }
                },
                error: function (data) {
                    alert(data);
                }
            });
            return false;
        });
        //取消关注
        $("#delAttention").click(function () {
            $('#delAttention').hide()
            $.ajax({
                type: "Post",
                url: "deleteAttention/" + beuserid,
                contentType: "charset=utf-8",
                dataType: "json",
                success: function (result) {
                    if (result.resultCode == 200) {
                        alert("200");
                        $('#addAttention').show();
                    }
                },
                error: function (err) {
                    alert(err);
                }
            });
            return false;
        });

    });
    
</script>

controller层代码：

//添加关注
    @RequestMapping("/addAttention/{beuserid}")
    @ResponseBody
    public Map addAttention(@PathVariable Integer beuserid, Attention attention, HttpServletRequest request, HttpSession session) {
        Map<Object, Object> map = new HashMap<>();
        //userid：主动关注者  beuserid：被关注者
        Integer userid = (Integer) session.getAttribute("userid");
        attention.setUserid(userid);
        attention.setBeuserid(beuserid);
        try {
            //新增关注
            attentionService.addAttention(attention);
            map.put("resultCode",200);
        }catch (Exception e){
            map.put("resultCode",404);
        }
        return map;
    }
    //取消关注
    @RequestMapping(value = "/deleteAttention/{beuserid}",method = RequestMethod.POST)
    @ResponseBody
    public Map deleteAttention(@PathVariable Integer beuserid, Attention attention, HttpServletRequest request, HttpSession session) {
        Map<Object, Object> map = new HashMap<>();
        //userid：主动关注者  beuserid：被关注者
        Integer userid = (Integer) session.getAttribute("userid");
        attentionService.deleteAttention(userid, beuserid);
        try {
            //取消关注
            attentionService.deleteAttention(userid,beuserid);
            map.put("resultCode", 200);
        } catch (Exception e) {
            map.put("resultCode", 404);
        }
        System.out.println("取消关注");
        return map;
    }
    //判断当前是否关注了该帖子的用户
    @RequestMapping("/isAttention/{beuserid}")
    @ResponseBody
    public Map isAttention(@PathVariable Integer beuserid, Attention attention, HttpServletRequest request, HttpSession session) {
        Map<Object, Object> map = new HashMap<>();
        //userid：主动关注者  beuserid：被关注者
        Integer userid = (Integer) session.getAttribute("userid");
        List<Attention> isAttention=attentionService.checkisAttention(userid,beuserid);
        if (isAttention.isEmpty()){//表示没关注
            map.put("isAttention", 10);
        }else {
            map.put("isAttention", 11);
        }
        System.out.println("是否关注");
        return map;
    }

其他代码就根据个人情况啦，只放重要的，说不定以后还要实现，类似功能，先记着。