Ajax实现收藏功能--数据库链式操作、js的元素属性改变 attr

判断是否是ajax传输
需要判断用户需要处于登录状态
如果是收藏，需要依据’user_id’和’article_id’将数据插入表中
如果是取消，需要依据’user_id’和’article_id’将数据删除

表设计结构

CREATE TABLE "zh_user_fav" (
  "id" int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT '主键',
  "user_id" int(11) DEFAULT NULL COMMENT '用户主键',
  "article_id" int(11) DEFAULT NULL COMMENT '文档主键',
  PRIMARY KEY ("id")
);

控制器代码

 //收藏功能
    public function fav()
    {
        if(!Request::isAjax()){
          return ['status'=>-1,'message'=>'请求类型错误'];
        }
        //获取从前端传递过来的数据
        $data = Request::param();
        //判断用户是否登录
        if(empty($data['session_id'])){
            return ['status'=>-2,'message'=>'请登录后再收藏'];
        }
        //查询条件
        $map[] = ['user_id','=',$data['user_id']];
        $map[] = ['article_id','=',$data['article_id']];
        $fav = Db::table('zh_user_fav')->where($map)->find();
        //插入数据收藏成功，取消收藏
        if(is_null($fav)){
            Db::table('zh_user_fav')->data([
                'user_id'=>$data['user_id'],
                'article_id'=>$data['article_id'],
            ])->insert();
            return ['status'=>1,'message'=>'收藏成功'];
        }else{
            Db::table('zh_user_fav')->where($map)->delete();
            return ['status'=>0,'message'=>'收藏已取消'];
        }
    }

前端HTML代码

 <button class="btn btn-default" type="button" id="fav" user_id="{$art.user_id}" article_id="{$art.id}" session_id="{$Think.session.user_id}">
  	收藏
</button>

js脚本代码

<script>
        $(function(){
            $('#fav').on('click',function () {
                //获取当前用户的ID和文章的ID  attr是获取属性
                var userId = $(this).attr('user_id');
                var articleId = $(this).attr('article_id');
                var sessionId = $(this).attr('session_id');
                if(userId && articleId){
                    $.ajax({
                        //请求方式
                        type : "get",
                        //请求地址
                        url : "{:url('index/fav')}",
                        data : {
                            user_id:userId,
                            article_id:articleId,
                            session_id:sessionId,
                            time:new Date().getTime()
                        },
                        dataType : 'json',
                        //请求成功
                        success : function(data){
                            switch (data.status)
                            {
                                case 1:
                                    $('#fav').attr('class','btn btn-success');
                                    $('#fav').text(data.message);
                                    break;
                                case 0:
                                    $('#fav').attr('class','btn btn-default');
                                    $('#fav').text(data.message);
                                    break;
                                case -1:
                                    alert(data.message);
                                    break;
                                case -2:
                                    alert(data.message);
                                    break;
                            }
                        }
                    });
                }
            })
        });
    </script>

页面调试查看ajax从控制器返回的数据