• 代码素材首页
  • 欢迎您,游客!您可以选择 注册
    头像

    PHP+Mysql+jQuery+Ajax实现文章心情投票功能

    来源:http://school.sxbd100.com/plug/219.html 代码交流管理员 2017-07-20浏览(501)

    本文实现投票的基本流程:通过ajax获取心情图标及柱状图相关数据,当用户点击其中的一个心情图标时,向Ajax.php发送请求,PHP验证用户cookie防止重复提交,然后将mysql中对应的数据心情字段内容加1,成功后返回前端页面,并更新柱状图和统计数据。

    万博彩票下载最新版本员,你不是一个人;网站开发QQ群:136483411  在线充值,或联系QQ 304534221直接充值

    PHP+Mysql+jQuery+Ajax实现文章心情投票功能
    分类:首页>>PHP/Mysql>>插件 阅读次数:502
    查看演示 下载次数: 9

    手机扫码访问:

    下载资源 下载积分: 100

      HTML

      首先我们放置一个#msg,用来显示操作结果信息,#mood是心情区域,其中ul通过jQuery异步加载心情图标、说明、柱状图以及统计信息。

        <div id="msg"></div>  

            <div id=mood>  

            <ul></ul>  

        </div>

      PHP

      首先我们在config.php中添加心情相关参数。

        //心情说明,用半角逗号隔开  

        $moodname='震惊,不解,愤怒,杯具,无聊,高兴,支持,超赞';  

        //心情图标文件,用半角逗号隔开(template/images/目录)  

        $moodpic='a1.gif,a2.gif,a3.gif,a4.gif,a5.gif,a6.gif,a7.gif,a8.gif';  

        //统计心情柱图标最大高度  

        $moodpicheight=80;


      接下来,我们有个交互动作,当点击对应的心情图标时,图标被标识为已发表,柱状图高度发生变化,并且上面的数字会+1,表示发表成功,如果继续点击心情图标,会提示已经发表过不能重复提交。请看代码:

        $(".face").live('click',function(){ //侦听点击事件  

            var face = $(this);  

            var mid = face.attr("rel"); //对应的心情id  

            var value = face.parent().find("span").html();  

            var val = parseInt(value)+1; //数字加1  

            //提交post请求  

            $.post("mood.php?action=send",{moodid:mid,id:1},function(data){  

                if(data>0){  

                    face.prev().css("height",data+"px");  

                    face.parent().find("span").html(val);  

                    face.find("img").addClass("selected");  

                    $("#msg").show().html("操作成功").fadeOut(2000);  

                }else{  

                    $("#msg").show().html(data).fadeOut(2000);  

                }  

            });  

        });

      Mysql

      数据库表mood.sql已经给你准备在压缩文件里了,或者你可以直接运行以下代码:

        CREATE TABLE IF NOT EXISTS `mood` (  

          `id` int(11) NOT NULL,  

          `mood0` int(11) NOT NULL DEFAULT '0',  

          `mood1` int(11) NOT NULL DEFAULT '0',  

          `mood2` int(11) NOT NULL DEFAULT '0',  

          `mood3` int(11) NOT NULL DEFAULT '0',  

          `mood4` int(11) NOT NULL DEFAULT '0',  

          `mood5` int(11) NOT NULL DEFAULT '0',  

          `mood6` int(11) NOT NULL DEFAULT '0',  

          `mood7` int(11) NOT NULL DEFAULT '0',  

          PRIMARY KEY (`id`)  

        ) ENGINE=MyISAM DEFAULT CHARSET=utf8;  

         

        INSERT INTO `mood` (`id`, `mood0`, `mood1`, `mood2`, `mood3`, `mood4`, `mood5`, `mood6`, `mood7`)  

        VALUES(1, 8, 6, 20, 16, 6, 9, 15, 21);

        


    标签: 统计 投票
    声明:本文为原创文章,如需转载,请注明来源school.sxbd100.com并保留原文链接:http://school.sxbd100.com/plug/219.html
    如果您觉得本文的内容对您的学习有所帮助,您可以扫描下面的二维码请我喝杯茶,感谢!
    alipay转账 alipay转账 扫扫加qq群

    评论(0)


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

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