jq “顶”和“踩”代码分享

2017年08月06日 1.74k 次阅读 0 条评论 0 人点赞

讲解使用PHP+MySql+jQuery实现的“顶”和“踩”投票功能,通过记录用户IP,判断用户的投票行为是否有效,该实例也可以扩展到投票系统中。如果您具备PHP、MySql和jQuery相关基础知识,那么请继续往下阅读。

当我们浏览网页时,我们想对网页内容如文章、评论中的观点持赞同或反对意见时,可以通过点击网页中的“顶”和“踩”来进行投票。而整个交互过程,开发者可以通过ajax异步来实现,从而提高用户体验。 查看效果: 本文结合实例,讲解使用PHP+MySql+jQuery实现的“顶”和“踩”投票功能,通过记录用户IP,判断用户的投票行为是否有效,该实例也可以扩展到投票系统中。如果您具备PHP、MySql和jQuery相关基础知识,那么请继续往下阅读。 我们先要准备为整个实例运行所需的mysql数据表,实例中需要两个表,votes表用来记录对应文章或评论的用户投票数,并且我们默认写入一条id为1的数据以便演示,votes_ip表用来记录用户每次投票的IP,程序根据用户IP决定投票是否有效。 MYSQL表:
-- ----------------------------
-- Table structure for ws_votes
-- ----------------------------
DROP TABLE IF EXISTS `ws_votes`;
CREATE TABLE `ws_votes` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `aid` int(10) DEFAULT NULL COMMENT '文章ID',
  `likes` int(10) NOT NULL DEFAULT '0',
  `unlikes` int(10) NOT NULL DEFAULT '0',
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=86 DEFAULT CHARSET=utf8;
-- ----------------------------
-- Table structure for ws_votes_ip
-- ----------------------------
DROP TABLE IF EXISTS `ws_votes_ip`;
CREATE TABLE `ws_votes_ip` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `aid` int(10) NOT NULL,
  `ip` varchar(40) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=189 DEFAULT CHARSET=utf8;
SET FOREIGN_KEY_CHECKS=1;
HTML代码部分: 在页面中,有两个分别表示“顶”和“踩”的按钮,即#dig_up和#dig_down,按钮上记录了投票的票数以及分别所占的百分比,非常直观的对比投票结果。
133

写的好,我很赞!

68%
42

太差劲了!

32%
CSS代码部分: 我们必须使用CSS来美化页面,我们使用一张图diggs.png来定位不同的按钮背景,通过设置position来定位各元素之间的位置关系。
.digg{width:530px;margin:20px auto;position:relative}
#dig_down,#dig_up{width:200px;height:48px;margin:10px;position:relative;border:1px solid #d3d3d3;padding-left:42px;cursor:pointer;float:left}
.digup{background:url(../../images/diggs.png) no-repeat 4px 2px}
.digup_on{background:url(../../images/diggs.png) no-repeat 4px -49px}
.digdown{background:url(../../images/diggs.png) no-repeat 4px -102px}
.digdown_on{background:url(../../images/diggs.png) no-repeat 4px -154px}
#num_down,#num_up{position:absolute;right:6px;top:18px;font-size:20px}
#dig_up p{height:24px;line-height:24px;color:#360}
#dig_down p{height:24px;line-height:24px;color:#f30}
.bar{width:100px;height:12px;line-height:12px;border:1px solid #f0f0f0;position:relative;text-align:center}
.bar span{display:block;height:12px}
.bar i{position:absolute;top:0;left:104px}
#bar_up span{background:#360}
#bar_down span{background:#f60}
#msg{position:absolute;right:20px;top:40px;font-size:18px;color:red}
js代码部分: 本示例还依赖于jQuery,因此一定不能忘了在页面中先载入jquery库文件。 首先,jQuery要处理的是鼠标分别滑向两个投票按钮时变换的背景图片,通过addClass()和removeClass()来实现。 然后,我们初始化数据,就是页面加载后,要显示初始的已经投票的结果,包括各投票数和所占百分比。我们将获取数据的操作写在一个自定义函数getdata()中,通过传递不同的请求地址和id参数来完成数据的载入。函数getdata()中,向URL发送一个ajax请求,根据后台处理的返回结果,如果投票成功则更改页面中相应的元素内容,包括投票数和所占百分比。

PHP代码部分: 函数likes()用来处理“顶”和“踩”投票模块,首先是判断用户IP是否已经投票过了,如果已经投票则直接返回相应提示,如果用户IP没有投票记录则更新votes表,将对应的投票数加1,然后向votes_ip表中插入该用户的IP记录,如果操作成功,则调用jsons()输出投票后的投票数和所占百分比等数据,否则输入操作失败的提示信息。
/**
     * 内容页投票
     */
    public function votes()
    {
        $action = $_GET['action'];
        $aid = $_GET['aid'];
        $ip = get_client_ip();//获取ip
        if($action=='like'){//顶
            $this->likes(1,$aid,$ip);
        }elseif($action=='unlike'){//踩
            $this->likes(0,$aid,$ip);
        }else{
            //调数据
            echo $this->jsons($aid);
        }
    }
    public function likes($type,$id,$ip){
        $count = M('VotesIp')->where(array('aid'=>$id,'ip'=>$ip))->count();
        //还没有顶过
        if($count==0){
            M('VotesIp')->add(array('aid'=>$id,'ip'=>$ip));
            //顶
            if($type==1){
                M('Votes')->where(array('aid'=>$id))->setInc('likes');
            //踩
            }else{
                M('Votes')->where(array('aid'=>$id))->setInc('unlikes');
            }
            echo $this->jsons($id);
            /*$sql_in = "insert into weishang_votes_ip (aid,ip) values ('$id','$ip')";
            mysql_query($sql_in);
            if(mysql_insert_id()>0){
                echo $this->jsons($id);
            }else{
                $arr['success'] = 0;
                $arr['msg'] = '操作失败,请重试';
                echo json_encode($arr);
            }*/
        }else{
            $msg = $type==1?'您已经顶过了':'您已经踩过了';
            $arr['success'] = 0;
            $arr['msg'] = $msg;
            echo json_encode($arr);
        }
    }
    //函数jsons()用来读取votes表中相应id的投票数,并计算百分比,最后将这些信息以json格式输出,供前端页面使用。
    public function jsons($id){
        $row = M('Votes')->where(array('aid'=>$id))->find();
        if(empty($row)){
            M('Votes')->add(array('aid'=>$id,'likes'=>0,'unlikes'=>0));
        }
        /*$query = mysql_query("select * from weishang_votes where aid=".$id);
        $row = mysql_fetch_array($query);*/
        $like = $row['likes'];
        $unlike = $row['unlikes'];
        $arr['success']=1;
        $arr['like'] = $like;
        $arr['unlike'] = $unlike;
        $like_percent = round($like/($like+$unlike),3)*100;
        $arr['like_percent'] = $like_percent.'%';
        if(empty($like_percent)){
            $arr['unlike_percent'] = $like_percent.'%';
        }else{
            $arr['unlike_percent'] =  (100-$like_percent).'%';
        }
        return json_encode($arr);
    }
diggs.png 图片附件已上传

作为一个真正的程序员,首先应该尊重编程,热爱你所写下的程序,他是你的伙伴,而不是工具。

文章评论(0

接收回复邮件通知