PHP+jQuery+Ajax+Mysql如何实现发表心情功能_javascript技巧

请看效果图：

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