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

2569
HTML代码结构:
<style type="text/css">
 .vote{position:relative;text-align: center;margin:50px auto 0}
 #mood{text-align:center;}
 #mood ul li,#mood ul li div.pillar{display:inline-block;display:-moz-inline-stack;zoom:1;*display:inline;}
 #mood ul li{width:80px; vertical-align: bottom; font-size:14px}
 #mood ul li span{ font-size:12px}
 #mood ul li div.pillar{height:20px; width:80px; background:url(images/bar.gif) repeat-y center;}
 img{border:1px solid #fff}
 .face{padding-top:10px; cursor:pointer}
 .face:hover{background:#f2faed}
 .selected{border:1px solid #3c0; background:url(images/checkbox.gif) no-repeat right bottom}
 #msg{position:absolute; top:-25px; left:250px; color:#f60; font-size:14px; font-weight:bold}
</style>
<div class="container">
   <div class="demo">
      <h2 class="title"><a>PHP+jQuery+Ajax+Mysql实现文章心情投票功能</a></h2>
         <div class='vote'>
         <div id="msg"></div>
         <div id='mood'>
         <ul></ul>
         </div>
          </div>
   </div>
</div>
Script:ajax处理
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.0/jquery.min.js"></script> 
        <script type="text/javascript">
            $(function() {
                $.ajax({
                    type: 'GET',
                    url: 'ajax.php',
                    cache: false,
                    data: {id:1},
                    dataType: 'json',
                    error: function() {
                        alert('可能是数据库出错了!请检查...');
                    },
                    success: function(json) {
                        if (json) {
                            $.each(json, function(i, v) {
                                var str = "<li><span>" + v['mood_val'] + "</span><div class=\"pillar\" style=\"height:" + v['height'] + "px;\"></div><div class=\"face\" onclick='onlcik_mid($(this))' rel=\"" + v['mid'] + "\"><img src=\"images/" + v['mood_pic'] + "\"><br/>" + v['mood_name'] + "</div></li>";
                                $("#mood ul").append(str);
                            });
                        }
                    }
                });
            });
            //点击追加+1
            function onlcik_mid (obj) {
                var mid = obj.attr("rel");
                var value = obj.parent().find("span").html();
                var val = parseInt(value) + 1;
                $.post("ajax.php?action=send", {moodid: mid, id: 1}, function(data) {
                    if (data.status) {
                        obj.prev().css("height", data.info + "px");
                        obj.parent().find("span").html(val);
                        obj.find("img").addClass("selected");
                        window.location.reload();
                    } else {
                        $("#msg").show().html(data.info).fadeOut(2000);
                    }
                },'json');
            }
        </script>
Ajax.php代码:
<?php
//数据库连接
$timezone="Asia/Shanghai";
//PDO数据库连接
$dns = "mysql:host=localhost;dbname=ajaxmood";
$pdo = new PDO($dns,"root","root");
$pdo->query("SET NAMES UTF8");
header("Content-Type: text/html; charset=utf-8");
date_default_timezone_set($timezone);
//心情说明
$moodname='震惊,不解,愤怒,杯具,无聊,高兴,支持,超赞';
//心情图标文件
$moodpic='a1.gif,a2.gif,a3.gif,a4.gif,a5.gif,a6.gif,a7.gif,a8.gif';
//统计心情柱图标最大高度
$moodpicheight=80;
//评论发表或者获取数据
$action = isset($_GET['action']) ? $_GET['action'] : "";
if ($action == 'send') {
    //评论发表
    $id = (int) $_POST['id']; //文章ID
    $mid = (int) $_POST['moodid']; //顺序数字
    if ($mid < 0 || !$id) {
        $data = array("status"=>0,"info"=>"文章好像不存在...");
        echo json_encode($data);
        exit;
    }
    //是否评论
    $havemood = chk_mood($id);
    if ($havemood == 1) {
        $data = array("status"=>0,"info"=>"您已经表达过心情了,保持平常心有益身心健康!");
        echo json_encode($data);
        exit;
    }
    //更新数据
    $sql = "UPDATE mood set mood".$mid. "= mood".$mid ."+1 WHERE id=".$id; 
    $query = $pdo->exec($sql);
    if ($query) {
        //设置cookie有效时间
        setcookie("mood" .$id, $mid.$id, time() + 3600);
        $sql = "SELECT * FROM mood WHERE id=".$id;
        $result = $pdo->query($sql);
        $rs = $result->fetchAll();
        //总数
        $total = $rs[0]['mood0'] + $rs[0]['mood1'] + $rs[0]['mood2'] + $rs[0]['mood3'] + $rs[0]['mood4'] + $rs[0]['mood5'] + $rs[0]['mood6'] + $rs[0]['mood7'];
        //高度
        $height = round(($rs[$field] / $total) * $moodpicheight);
        $data = array("status"=>1,"info"=>$height);
        echo json_encode($data);
        exit;
    } else {
        $data = array("status"=>0,"info"=>"更新失败,请重试哦...");
        echo json_encode($data);
        exit;
    }
} else { 
    //获取数据
    $mname = explode(',', $moodname); //心情说明
    $num = count($mname);//统计多少个
    $mpic = explode(',', $moodpic); //心情图标
    $id = (int) $_GET['id']; //id 文章ID
    $sql = "SELECT * FROM mood where id=".$id;
    $result = $pdo->query($sql);
    $rs = $result->fetchAll();
    if ($rs) {
        foreach ($rs as $key => $v) {
          $total = $v['mood0'] + $v['mood1'] + $v['mood2'] + $v['mood3'] + $v['mood4'] + $v['mood5'] + $v['mood6'] + $v['mood7'];
        }
        for ($i = 0; $i < $num; $i++) {
            $field = 'mood' . $i; 
            $m_val = intval($rs[0][$field]); //统计数
            $height = 0; //柱图高度
            if ($total && $m_val) {
                $height = round(($m_val / $total) * $moodpicheight); //计算高度
            }
            $arr[] = array(
                'mid' => $i,
                'mood_name' => $mname[$i],
                'mood_pic' => $mpic[$i],
                'mood_val' => $m_val,
                'height' => $height
            );
        }
        echo json_encode($arr);
    }
}
//验证是否提交过
function chk_mood($id) {
    $cookie = $_COOKIE['mood' . $id];
    if ($cookie) {
        $doit = 1;
    } else {
        $doit = 0;
    }
    return $doit;
}
?>

文件压缩包:PHP+jQuery+Ajax+Mysql实现文章心情投票功能