前端ajax--收藏功能的实现

收藏按钮

<div class="mui-icon mui-icon-star  mui-pull-right"></div>

js逻辑代码：

//一进入页面查询一下当前项目收藏、非收藏状态，点击后进行收藏、取消收藏                    
$.ajax({
            url: "../.../...", 
            type: "post",
            data: {
                USER_ID :Userid,//用户id
                projectId:project_id//项目ID
            },
            success: function (data) {
                if (data.ret == 1) {
                    //mui.toast("您已收藏");//当前项目的当前状态
                    $(".mui-icon-star").css({"color":"#f00"});//已收藏项目为红色
                    //已收藏，点击后就是取消收藏
                    var i = 0;//默认值为0
                    //点击后判断是执行收藏还是取消收藏
                    $(".mui-icon-star").on("click", function (e) {
                        var k = 0;
                        i++;
                        //如果当前是非收藏状态，点击后就执行收藏操作
                        if (i % 2 == 0) {
                                $.ajax({
                        url: "../star/addStar.do",
                        type: "post",
                        data: {
                            USER_ID:Userid,//用户id
                            projectId:project_id//项目ID
                        },
                        success: function (data) {
                            if (data.ret == 1) {
                                mui.toast(data.data);
                                //取消收藏成功，图标变为原样    
                                $(".mui-icon-star").css({"color":"#007aff"});
                            
                            }
                            else if (data.ret == 0) {
                                mui.toast("添加收藏失败！");
                            }
                        },
                        error: function () {
                            mui.toast("添加收藏成功！");
                        }
                    })
                //如果当前是收藏状态，点击后就执行取消收藏操作
                        } else {
                        
                    $.ajax({
                        url: "../star/unStar.do",
                        type: "post",
                        data: {
                            USER_ID:Userid,//用户id
                            projectId:project_id//项目ID
                        },
                        success: function (data) {
                            if (data.ret == 1) {
                                mui.toast(data.data);
                                //取消收藏成功，图标变为原样    
                                $(".mui-icon-star").css({"color":"black"});
                            
                            }
                            else if (data.ret == 0) {
                                mui.toast("取消收藏失败！");
                            }
                        },
                        error: function () {
                            mui.toast("取消收藏失败！");
                        }
                    })
                        }
                    })
                }
                else if (data.ret == 0) {
                    mui.toast("您未收藏！");//当前状态为未收藏
        
                    var i = 0;
                    //点击按钮后，判断是执行添加收藏还是取消收藏
                    $(".mui-icon-star").on("click", function (e) {
                        var k = 0;
                        i++;
                        if (i % 2 == 0) {
                                
                            $.ajax({
                        url: "../star/unStar.do", //取消收藏
                        type: "post",
                        data: {
                            USER_ID:Userid,//用户id
                            projectId:project_id//项目ID
                        },
                        success: function (data) {
                            if (data.ret == 1) {
                                mui.toast(data.data);
                                //取消收藏成功，图标变为原样    
                                $(".mui-icon-star").css({"color":"black"});
                            
                            }
                            else if (data.ret == 0) {
                                mui.toast("取消收藏失败！");
                            }
                        },
                        error: function () {
                            mui.toast("取消收藏失败！");
                        }
                    })
                        } else {
                    //未收藏状态下，点击后执行收藏操作
                            $.ajax({
                        url: "../star/addStar.do",
                        type: "post",
                        data: {
                            USER_ID:Userid,//用户id
                            projectId:project_id//项目ID
                        },
                        success: function (data) {
                            if (data.ret == 1) {
                                mui.toast(data.data);
                                //添加收藏成功，图标变为蓝色
                                $(".mui-icon-star").css({"color":"#007aff"});
                            }
                            else if (data.ret == 0) {
                                mui.toast("添加收藏失败！");
                            }
                        },
                        error: function () {
                            mui.toast("添加收藏失败！");
                        }
                    })
                        }
                    })
                }
            },
            error: function () {
                mui.toast("查询失败！");
            }
        })

转载于：https://www.cnblogs.com/heyiming/p/11289685.html