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实现文章心情投票功能
