时间：2021-07-01 10:21:17 帮助过：5人阅读
请看效果图：
html：
先看HTML，我们在index.html中放置一个#msg，用来显示操作结果信息，#mood是操作主区域，其中ul通过javascript异步加载心情图标、说明、柱状图以及统计信息。
PHP
首先我们在config.php配置文件中，配置数据库连接信息，以及示例相关参数。
$
host="localhost";
$db_user="root";
$db_pass="";
$db_name="demo";
$link=mysql_connect($host,$db_user,$db_pass);
mysql_select_db($db_name,$link);
mysql_query("SET names UTF8");
//心情说明，用半角逗号隔开
$moodname='震惊,不解,愤怒,杯具,无聊,高兴,支持,超赞';
//心情图标文件，用半角逗号隔开(template/https://img.gxlcms.com/images/目录)
$moodpic='a1.gif,a2.gif,a3.gif,a4.gif,a5.gif,a6.gif,a7.gif,a8.gif';
//统计心情柱图标最大高度
$moodpicheight=80;
接下来，我们在mood.php中准备分两部分，通过接收action参数，分为第一部分：发表心情，第二部分：获取心情相关信息。
Part1：发表心情。
用户从前端通过post提交发表心情的参数，包括文章id，心情id。先验证文章是否存在，然后再验证用户是否已经对这篇文章发表过心情了，接着操作数据库，将对应的心情字段值+1，并计算出当前心情对应的柱状图的高度，返回给前端js接收。
验证用户是否已发表过心情，我们通过函数chk_mood()来判断用户对应的cookie是否存在。
Part2：获取心情
通过获取数据表中文章或帖子id对应的心情数据，得到每种心情对应的值（可以理解为发表心情的次数），并计算其柱状图高度，将每种心情对应的值、名称、图标、高度信息构造成数组，最终以JSON格式数据返回给前端。
jQuery
我们使用强大的jQuery来完成本例中所有ajax的交互动作，因此在index.html中要先载入jquery.js库，目前1.8版本已经发布了哦，可以到官网http://jquery.com/下载。
接着我们向mood.php发送Ajax请求，获取心情列表信息，并展示在index.html页面中。
这样，我们在访问index.html后，页面会载入心情列表，当然要想看到最终排列效果，还需要CSS，本文不讲解相关CSS，请下载源码或查看demo了解。
接下来，我们有个交互动作，当点击对应的心情图标时，图标被标识为已发表，柱状图高度发生变化，并且上面的数字会+1，表示发表成功，如果继续点击心情图标，会提示已经发表过不能重复提交。请看代码：
没看明白的童鞋可以下载源码仔细研究，点击文章开头的Download按钮即可下载，最后附上本例所需的mysql数据表结构，谢谢您的关注。
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);