• 候选企业:泸州老窖股份有限公司 2019-04-15
  • 艰辛创作路(舞者篇) 2019-04-15
  • 浙江检验检疫局积极推进出口水产品HACCP认证示范区建设 2019-03-24
  • 台东鹿野返乡青年“阿山哥”的农夫梦 2019-03-16
  • 《格萨尔》史诗藏译汉16册完成终审 2019-03-16
  • 确认过剧集,陈坤和万茜是来搞笑的! 2019-01-30
  • 素材牛

    德邦快递单号查询:PHP+jQuery+Ajax+Mysql实现文章阅后心情态度投票功能

    江苏7位数150期走势图 www.gbotg.com  所属分类:网页特效,PHP/MySql-Ajax,UI效果/布局

     浏览:17036次-  下载:24次-  评论:8次-  发布时间:2016-07-29
    PHP+jQuery+Ajax+Mysql实现文章阅后心情态度投票功能
    积分说明:注册即送5牛币,每天签到可获得5牛币,第三方账号登陆、注册直接赠送20牛币!??? 我要充值???更多积分说明?
    素材描述:很多大站里面都有发表心情的功能,通过这个功能可以直观统计分析文章或帖子的浏览者的心情感受数据,也很有意思。今天我们来分析一下文章心情投票功能的原理

    详细介绍

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

    1、HTML部分:

    <div id="msg">div> 
        <div id=mood> 
        <ul>ul> 
    div>

    #msg为操作提示区域
    #mood为投票操作区域
    ul为投票数据加载区域

    2、PHP部分:

    config.php为数据库、投票图片文字配置文件

    $host="localhost"; 
    $db_user="root"; //数据库用户名
    $db_pass="";  //数据库用户密码
    $db_name="scn_demo"; //数据库名称
     
    $link=mysql_connect($host,$db_user,$db_pass); 
    mysql_select_db($db_name,$link); 
    mysql_query("SET names UTF8"); 
     
    //心情说明,用半角逗号隔开 
    $moodname='震惊,不解,愤怒,杯具,无聊,高兴,支持,超赞'; 
    //心情图标文件,用半角逗号隔开(template/images/目录) 
    $moodpic='a1.gif,a2.gif,a3.gif,a4.gif,a5.gif,a6.gif,a7.gif,a8.gif'; 
    //统计心情柱图标最大高度 
    $moodpicheight=80; 

    mood.php分两部分。第一部分:发表心情,第二部分:获取心情相关信息。
    PS:文件内有注释,可自行下载查看

    3、jQuery部分:

    向mood.php发送Ajax请求,获取心情列表信息,并展示在index.html页面中。

    $(function(){ 
        $.ajax({ 
            type: 'GET', //通过get方式发送请求 
            url: 'mood.php', //目标地址 
            cache: false, //不缓存数据,注意文明发表心情的数据是实时的,需将cache设置为false,默认是true 
            data: 'id=1', //参数,对应文章或帖子的id,本例中固定为1,实际应用中是获取当前文章或帖子的id 
            dataType: 'json', //数据类型为json 
            error: function(){ 
                alert('出错了!'); 
            }, 
            success: function(json){ //请求成功后 
                if(json){ 
                    $.each(json,function(index,array){ //遍历json数据列 
                        var str = "
  • "+array['mood_val']+"
    +array['height']+"px;\">
    +array['mid']+"\">+array['mood_pic']+"\">
    "
    +array['mood_name']+"
  • "
    ; $("#mood ul").append(str); //将数据加入到#mood ul列表中 }); } } }); ... });

    我们在访问index.html后,页面会载入心情列表,当然要想看到最终排列效果。

    接下来,我们有个交互动作,当点击对应的心情图标时,图标被标识为已发表,柱状图高度发生变化,并且上面的数字会+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); 
            } 
        }); 
    }); 

    CSS部分这里就不详细讲解,可下载素材后查看

    4、数据库部分:

    数据库结构已经打包到附件(demo_02.sql),可直接导入。也可直接执行以下SQL语句

    CREATE TABLE IF NOT EXISTS `demo_01` ( 
      `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 `demo_01` (`id`, `mood0`, `mood1`, `mood2`, `mood3`, `mood4`, `mood5`, `mood6`, `mood7`) 
    VALUES(1, 8, 6, 20, 16, 6, 9, 15, 21); 

    可以了,有什么问题欢迎在下面留言

    讨论这个素材(8)回答他人问题或分享使用心得会奖励牛币

    huhuachuan
    2016年07月29日

    搜狐好像有这个东西

    回复
    闪闪红星
    2016年08月05日

    这个用户体验比较好

    亡灵法师:确实很好
    回复
    闪闪红星
    2016年08月15日

    好多地方都能看到这个

    回复
    longlong
    2017年11月22日

    好多地方都能看到这个

    回复
    华夏nan
    2017年12月26日

     感谢分享

    回复
    pluspig
    2018年06月17日

     感谢分享 希望能学到东西

    回复
    艺美科技
    2018年09月14日

    不错!下载看看!

    回复
     文明上网,理性发言!   ?? 阿里云幸运券,戳我领取
    我的牛币余额:0 已下载次数:24
    所需牛币:2 开始下载

    牛币获?。?/strong>可通过签到、评论、充值、发布素材获得 ? 牛币充值

    会员账号
    会员密码
    安全验证
  • 候选企业:泸州老窖股份有限公司 2019-04-15
  • 艰辛创作路(舞者篇) 2019-04-15
  • 浙江检验检疫局积极推进出口水产品HACCP认证示范区建设 2019-03-24
  • 台东鹿野返乡青年“阿山哥”的农夫梦 2019-03-16
  • 《格萨尔》史诗藏译汉16册完成终审 2019-03-16
  • 确认过剧集,陈坤和万茜是来搞笑的! 2019-01-30