PHP+jQuery+Ajax+Mysql实现文章阅后心情态度投票功能

本素材实现投票的流程：通过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); 

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