PHP jQuery Ajax Mysql如何实现发布心情的功能

要实现通过php jquery ajax mysql技术发布心情的功能，我先给大家讲解一下一般的流程：首页的index.html页面通过ajax获取心情图标和直方图相关数据，当用户点击其中一个心情图标时，它会向后台php发送请求，后台php会验证用户的cookie(是否是第一次提交)， 然后在数据库对应的心情字段内容加1，成功后返回首页，告诉首页索引页发布成功，并调整直方图和统计数据。

请看效果图：

html:

先看HTML，我们在index.html放一个#msg来显示操作结果信息。#情绪是主要的操作区域，ul通过javascript异步加载情绪图标、描述、直方图和统计信息。复制的代码如下： div id=' msg '/div div id=moo dul/ul/div

首先，我们在configure配置文件中配置数据库连接信息和示例相关参数。$

主机=' 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 name UTF8 ')；//情绪描述，用逗号分隔$moodname='震惊、不解、愤怒、无聊、开心、支持、牛逼'；//心情图标文件，用逗号分隔(模板/图像/目录)$ moodpic=' a1.gif，a2.gif，a3.gif，a4.gif，a5.gif，a6.gif，a7.gif，A8 . gif '；//计算心情栏图标的最大高度$ moodpickheight=80接下来，我们将把mood.php分成两部分。通过接收动作参数，我们分为第一部分：发布情绪，第二部分：获取情绪相关信息。复制代码如下： include _ once(' config . PHP ')；$ action=$ _ GET[' action ']；If($action=='send'){ //发布心情.}else{ //获取情绪.}

第一部分：表达你的感受。用户通过帖子从前端提交和发布心情参数，包括文章id和心情id。首先验证文章是否存在，然后验证用户是否已经为这篇文章发布了情绪，然后操作数据库，将对应的情绪字段值设置为1，计算当前情绪对应的直方图的高度，返回给前端js进行接收。

$ id=(int)$ _ POST[' id ']；//文章或帖子id $ mid=(int)$ _ POST[' moo did ']；//心情id(配置文件中提供了8种心情)if(！$mid ||！$id){ echo '此链接不存在；退出；} $ have mood=chk _ mood($ id)；//验证cookieif($havemood==1){ echo '你已经表达了你的心情，保持一颗正常的心对你的健康有好处！退出；} $ field=“mood”。$ mid//mood0、mood1、mood2.分别代表不同的心情字段：$ query=MySQL _ query(' update mood set '。$ field。'='.$ field。1其中标识='。$ ID)；//对应的情绪字段值1if ($ query) {setcookie ('mood ')。身份证，中间。$ id，time()300)；//设置cookies。为了进行测试，我们将cookies的过期时间设置为300s $ query 2=MySQL _ query(' select * from mood，其中id=$ id ')。$ RS=MySQL _ fetch _ array($ query 2)；//获取本文的情绪数据$ total=$ RS[' mood 0 ']$ RS[' mood 1 ']$ RS[' mood 2 ']$ RS[' mood 3 ']$ RS[' mood 4 ']$ RS[' mood 5 ']$ RS[' mood 6 ' $ height=round($ RS[$ field]/$ total)* $ mood chight)；//获取总金额，计算当前情绪对应的直方图的高度echo $ height//返回当前心情栏的高度} else { echo-1；//数据错误}为了验证用户是否发布了心情，我们使用函数chk_mood()来判断用户对应的cookie是否存在。

//验证函数chk _ mood($ id){ $ cookie=$ _ cookie[' mood ']。$ id]已提交；if($ cookie){ $ doit=1；} else { $ doit=0；}返回$ doit}Part2:获取情绪获取数据表中文章或帖子id对应的情绪数据，获取每个情绪对应的值(可以理解为发布情绪的次数)，计算直方图高度，将每个情绪对应的值、名称、图标、高度信息构造成数组，最后以JSON格式返回给前端。

$mname=explode('，'，$ mood name)；//心情说明$ num=count($ mname)；$mpic=explode('，'，$ mood pic)；//心情图标$ id=(int)$ _ GET[' id ']；//文章或帖子id$query=mysql_query('从心情中选择*其中id=$ id ')；//查询对应的心情数据$ RS=MySQL _ fetch _ array($ query)；if($rs){ //得到发表心情的总量$ total=$ RS['情绪0 ']$ RS['情绪1 ']$ RS['情绪2 ']$ RS['情绪3 ']$ RS['情绪4 ']$ RS['情绪5 ']$ RS['情绪6 ']$ RS['情绪7 ']；对于($ I=0；$ i $ num$i ){ $field='mood ' .$ I；//字段名$ m _ val=int val($ RS[$ field])；//心情对应的值（次数)$ height=0；//柱图高度if($ total $ m _ val){ $ height=round($ m _ val/$ total)* $ mood pic height)；//计算高度} $arr[]=数组(' mid'=$i，//对应心情id 'mood_name'=$mname[$i]，//心情名称mood_pic'=$mpic[$i]，//图标mood_val'=$m_val，//次数' height'=$height //柱状图高度);} echo JSON _ encode($ arr)；//返回JSON数据}jQuery

我们使用强大的jQuery来完成本例中所有创建交互式、快速动态网页应用的网页开发技术的交互动作，因此在index.html中要先载入jquery.js库，目前1.8版本已经发布了哦，可以到官网http://jquery.com/下载。接着我们向mood.php发送埃阿斯请求，获取心情列表信息，并展示在index.html页面中。

$(function(){ $).ajax({ type: 'GET '，//通过得到方式发送请求url: 'mood.php '，//目标地址cache: false，//不缓存数据，注意文明发表心情的数据是实时的，需将躲藏设置为假的，默认是true data: 'id=1 '，//参数，对应文章或帖子的id，本例中固定为1,实际应用中是获取当前文章或帖子的id dataType: 'json '，//数据类型为json错误：函数(){ alert('出错了!');}，成功：函数(json){ //请求成功后if(json){ $ .每个(json，函数（索引，数组){ //遍历json数据列var str='lispan '数组[' mood _ val ']'/span div class=' pile ' style=' height : '数组['高度']' px；/div class=' face ' rel=' array[' mid ']' img src=' http : images/' array[' mood _ pic ']' br/' array[' mood _ name ']'/div/Li '；$('#mood ul ').追加（字符串);//将数据加入到#情绪保险商实验所列表中});} } });});这样，我们在访问index.html后，页面会载入心情列表，当然要想看到最终排列效果，还需要CSS，本文不讲解相关CSS，请下载源码或查看演示了解。接下来，我们有个交互动作，当点击对应的心情图标时，图标被标识为已发表，柱状图高度发生变化，并且上面的数字会1,表示发表成功，如果继续点击心情图标，会提示已经发表过不能重复提交。请看代码：

$('.脸')。live('click '，function(){ //侦听点击事件var face=$(this)；var mid=face。attr(' rel ')；//对应的心情id var值=face.parent().查找(' span ').html()；var val=parseInt(值)1;//数字加1 //提交邮政请求$.post('mood.php？action=send '，{moodid:mid，id:1}，function(data){ if(data 0){ face。prev().css(“”高度，数据px’)；face.parent().查找(' span ').html(val)；face.find('img ').addClass(')选定');$('#msg ').显示()。html(")操作成功').淡出(2000年年);}else{ $('#msg ').显示()。html(数据)。淡出(2000年年);} });});没看明白的童鞋可以下载源码仔细研究，点击文章开头的[计]下载按钮即可下载，最后附上本例所需的关系型数据库数据表结构，谢谢您的关注。

如果不存在，则创建表“情绪”(“id”int(11)NOT NULL，“情绪0”int(11)NOT NULL DEFAULT“0”、“情绪1”int(11)NOT NULL DEFAULT“0”、“情绪2”int(11)NOT NULL DEFAULT“0”、“情绪4”int(11)NOT NULL DEFAULT“0”、“情绪5”int(11)NOT NULL DEFAULT“0”、“情绪6”int(11)NOTINSERT进入“情绪”(“id”、“mood 0”、“mood1”、“mood 1 ”)