1、PHP+jQuery+Ajax+Mysql 实现发表心情功能本文通过实例讲解使用 PHP+jQuery+Ajax+Mysql 相结合，实现了用户发表心情的功能，操作简单，实用性强，是一篇将 WEB 知识进行综合应用的文章，因此读者需要具备PHP、Mysql 、 jQuery 以及 ajax 相关知识 。本示例的大致原理和流程是这样的：主页面 index.html 通过 ajax 获取心情图标及柱状图相关数据，当用户点击其中的一个心情图标时，向后台 php 发送请求，PHP 验证用户 cookie防止重复提交，然后将 mysql 中对应的数据心情字段内容加 1，成功后返回前端页面，告诉 inde
2、x.html 发表成功，并调整柱状图和统计数据。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
3、($db_name,$link); mysql_query(“SET names UTF8“); /心情说明，用半角逗号隔开 $moodname=震惊,不解,愤怒,杯具,无聊,高兴,支持,超赞; /心情图标文件，用半角逗号隔开(template/images/目录) $moodpic=a1.gif,a2.gif,a3.gif,a4.gif,a5.gif,a6.gif,a7.gif,a8.gif; /统计心情柱图标最大高度 $moodpicheight=80; 接下来，我们在 mood.php 中准备分两部分，通过接收 action 参数，分为第一部分：发表心情，第二部分：获取心情相关信息。in
4、clude_once(“config.php“); $action = $_GETaction; if($action=send) /发表心情 . else /获取心情 . Part1：发表心情。用户从前端通过 post 提交发表心情的参数，包括文章 id，心情 id。先验证文章是否存在，然后再验证用户是否已经对这篇文章发表过心情了，接着操作数据库，将对应的心情字段值+1，并计算出当前心情对应的柱状图的高度，返回给前端 js 接收。$id = (int)$_POSTid; /文章或帖子 id $mid = (int)$_POSTmoodid; /心情 id（配置文件中提供 8 种心情） if(
5、!$mid | !$id) echo “此链接不存在“;exit; $havemood = chk_mood($id); /验证 cookie if($havemood=1) echo “您已经表达过心情了，保持平常心有益身心健康！ “;exit; $field = mood.$mid; /数据表中的心情字段，分别用 mood0，mood1，mood2.表示不同的心情字段 $query = mysql_query(“update mood set “.$field.“=“.$field.“+1 where id=“.$id); /对应的心情字段值+1 if($query) setcookie(
6、“mood“.$id, $mid.$id, time()+300); /设置 cookie，为了测试我们设置 cookie 过期时间为 300s $query2 = mysql_query(“select * from mood where id=$id“); $rs = mysql_fetch_array($query2);/获取该文章的心情数据 $total = $rsmood0+$rsmood1+$rsmood2+$rsmood3+$rsmood4+$rsmood5+ $rsmood6+$rsmood7; $height = round($rs$field/$total)*$moodpi
7、cheight); /得到总量，并计算当前对应心情的柱状图的高度 echo $height; /返回当前心情柱状的高度 else echo -1; /数据出错 验证用户是否已发表过心情，我们通过函数 chk_mood()来判断用户对应的 cookie 是否存在。/验证是否提交过 function chk_mood($id) $cookie = $_COOKIEmood.$id; if($cookie) $doit = 1; else $doit = 0; return $doit; Part2：获取心情通过获取数据表中文章或帖子 id 对应的心情数据，得到每种心情对应的值（可以理解为发表心情的
8、次数） ，并计算其柱状图高度，将每种心情对应的值、名称、图标、高度信息构造成数组，最终以 JSON 格式数据返回给前端。$mname = explode(,$moodname);/心情说明 $num = count($mname); $mpic = explode(,$moodpic);/心情图标 $id = (int)$_GETid; /文章或帖子 id $query = mysql_query(“select * from mood where id=$id“); /查询对应的心情数据 $rs = mysql_fetch_array($query); if($rs) /得到发表心情的总量
9、$total = $rsmood0+$rsmood1+$rsmood2+$rsmood3+$rsmood4+ $rsmood5+$rsmood6+$rsmood7; for($i=0;$i $i, /对应心情 id mood_name = $mname$i, /心情名称 mood_pic = $mpic$i, /图标 mood_val = $m_val, /次数 height = $height /柱状图高度 ); echo json_encode($arr); /返回 JSON 数据 jQuery我们使用强大的 jQuery 来完成本例中所有 ajax 的交互动作，因此在 index.htm
10、l 中要先载入jquery.js 库，目前 1.8 版本已经发布了哦，可以到官网 http:/ mood.php 发送 Ajax 请求，获取心情列表信息，并展示在 index.html 页面中。$(function() $.ajax( type: GET, /通过 get 方式发送请求 url: mood.php, /目标地址 cache: false, /不缓存数据，注意文明发表心情的数据是实时的，需将 cache 设置为false，默认是 true data: id=1, /参数，对应文章或帖子的 id，本例中固定为 1，实际应用中是获取当前文章或帖子的 id dataType: json
11、, /数据类型为 json error: function() alert(出错了！); , success: function(json) /请求成功后 if(json) $.each(json,function(index,array) /遍历 json 数据列 var str = “+arraymood_val+“ “+arraymood_name+“; $(“#mood ul“).append(str); /将数据加入到#mood ul 列表中 ); ); . ); 这样，我们在访问 index.html 后，页面会载入心情列表，当然要想看到最终排列效果，还需要 CSS，本文不讲解相关
12、 CSS，请下载源码或查看 demo 了解。接下来，我们有个交互动作，当点击对应的心情图标时，图标被标识为已发表，柱状图高度发生变化，并且上面的数字会+1，表示发表成功，如果继续点击心情图标，会提示已经发表过不能重复提交。请看代码：$(“.face“).live(click,function() /侦听点击事件 var face = $(this); var mid = face.attr(“rel“); /对应的心情 id var value = face.parent().find(“span“).html(); var val = parseInt(value)+1; /数字加 1 /提
13、交 post 请求 $.post(“mood.php?action=send“,moodid:mid,id:1,function(data) if(data0) face.prev().css(“height“,data+“px“); face.parent().find(“span“).html(val); face.find(“img“).addClass(“selected“); $(“#msg“).show().html(“操作成功“).fadeOut(2000); else $(“#msg“).show().html(data).fadeOut(2000); ); ); 没看明白的童
14、鞋可以下载源码仔细研究，点击文章开头的 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);
