请看效果图:
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//Uploads/images/目录) $moodpic='a1.gif,a2.gif,a3.gif,a4.gif,a5.gif,a6.gif,a7.gif,a8.gif'; //统计心情柱图标最大高度 $moodpicheight=80;
接下来,我们在mood.php中准备分两部分,通过接收action参数,分为第一部分:发表心情,第二部分:获取心情相关信息。
代码如下:
include_once("config.php");
$action = $_GET['action'];
if($action=='send'){ //发表心情
...
}else{ //获取心情
...
}
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);
声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com