头像

PHP+MySql+jQuery实现的“顶”和“踩”投票功能

来源:https://www.daimasucai.com/other/19.html 代码素材管理员 2016-09-04浏览()

当我们浏览网页时,我们想对网页内容如文章、评论中的观点持赞同或反对意见时,可以通过点击网页中的“顶”和“踩”来进行投票。而整个交互过程,开发者可以通过ajax异步来实现,从而提高用户体验。

程序员,你不是一个人;网站开发QQ群:  在线充值,或联系QQ 3078847178直接充值

PHP+MySql+jQuery实现的“顶”和“踩”投票功能
分类:首页>>PHP/Mysql>>其他 阅读次数:
查看演示 下载次数: 105

手机扫码访问:

下载资源 下载积分: 0

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

  准备我们先要准备为整个实例运行所需的mysql数据表,实例中需要两个表,votes表用来记录对应文章或评论的用户投票数,并且我们默认写入一条id为1的数据以便演示,votes_ip表用来记录用户每次投票的IP,程序根据用户IP决定投票是否有效。

    CREATE TABLE IF NOT EXISTS `votes` ( 

      `id` int(10) NOT NULL AUTO_INCREMENT, 

      `likes` int(10) NOT NULL DEFAULT '0', 

      `unlikes` int(10) NOT NULL DEFAULT '0', 

      PRIMARY KEY (`id`) 

    ) ENGINE=MyISAM  DEFAULT CHARSET=utf8; 

     

     

    INSERT INTO `votes` (`id`, `likes`, `unlikes`) VALUES 

    (1, 30, 10); 

     

    CREATE TABLE IF NOT EXISTS `votes_ip` ( 

      `id` int(10) NOT NULL, 

      `vid` int(10) NOT NULL, 

      `ip` varchar(40) NOT NULL 

    ) ENGINE=MyISAM DEFAULT CHARSET=utf8; 

  然后,我们初始化数据,就是页面加载后,要显示初始的已经投票的结果,包括各投票数和所占百分比。我们将获取数据的操作写在一个自定义函数getdata()中,通过传递不同的请求地址和id参数来完成数据的载入。函数getdata()中,向URL发送一个ajax请求,根据后台处理的返回结果,如果投票成功则更改页面中相应的元素内容,包括投票数和所占百分比。

    function getdata(url,sid){ 

        $.getJSON(url,{id:sid},function(data){ 

            if(data.success==1){//投票成功 

                $("#num_up").html(data.like); 

                //通过控制宽度来显示百分比进度条效果 

                $("#bar_up span").css("width",data.like_percent); 

                $("#bar_up i").html(data.like_percent); 

                $("#num_down").html(data.unlike); 

                $("#bar_down span").css("width",data.unlike_percent); 

                $("#bar_down i").html(data.unlike_percent); 

            }else{//投票失败 

                $("#msg").html(data.msg).show().css({'opacity':1,'top':'40px'}) 

                .animate({top:'-50px',opacity:0}, "slow"); 

            } 

        }); 

    } 

  该实例可以应用到常见的"赞"、同意和反对评论、投票系统等场景中,运用了Ajax原理实现的前后端交互功能。do.php中还有个函数get_client_ip()用来获取用户真实IP,这个函数之前我有文章也发过,已打包在代码中欢迎下载,在此不贴出来了。

声明:本文为原创文章,如需转载,请注明来源daimasucai.com并保留原文链接:https://www.daimasucai.com/other/19.html
如果您觉得本文的内容对您的学习有所帮助,您可以扫描下面的二维码请我喝杯茶,感谢!
alipay转账 alipay转账 扫扫加qq群

评论(0)


温馨提示:为规范评论内容,垃圾评论一律封号...

后面还有条评论,点击查看>>