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


Posted in Javascript onAugust 06, 2015

实现发表心情功能通过php+jquery+ajax+mysql技术,大致流程我先给大家理下:主页index.html页面通过ajax获取心情图标及柱状图相关数据,当用户点击其中的一个心情图标时,向后台php发送请求,php对用户cookie验证(是否是首次提交),然后将数据库对应的心情字段内容加1,成功后返回前端页面,告诉首页index页面发表成功,并调整柱状图和统计数据。

请看效果图:

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

html:

先看HTML,我们在index.html中放置一个#msg,用来显示操作结果信息,#mood是操作主区域,其中ul通过javascript异步加载心情图标、说明、柱状图以及统计信息。

<div id="msg"></div>

    <div id=mood>

    <ul></ul>

</div>

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/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接收。

$id = (int)$_POST['id']; //文章或帖子id
$mid = (int)$_POST['moodid']; //心情id(配置文件中提供8种心情)
if(!$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("mood".$id, $mid.$id, time()+300); //设置cookie,为了测试我们设置cookie过期时间为300s
 $query2 = mysql_query("select * from mood where id=$id");
 $rs = mysql_fetch_array($query2);//获取该文章的心情数据
 $total = $rs['mood0']+$rs['mood1']+$rs['mood2']+$rs['mood3']+$rs['mood4']+$rs['mood5']+
$rs['mood6']+$rs['mood7'];
 $height = round(($rs[$field]/$total)*$moodpicheight); //得到总量,并计算当前对应心情的柱状图的高度
 echo $height; //返回当前心情柱状的高度
}else{
 echo -1; //数据出错
}

验证用户是否已发表过心情,我们通过函数chk_mood()来判断用户对应的cookie是否存在。

//验证是否提交过
function chk_mood($id){
 $cookie = $_COOKIE['mood'.$id];
 if($cookie){
 $doit = 1;
 }else{
 $doit = 0;
 }
 return $doit;
}

Part2:获取心情
通过获取数据表中文章或帖子id对应的心情数据,得到每种心情对应的值(可以理解为发表心情的次数),并计算其柱状图高度,将每种心情对应的值、名称、图标、高度信息构造成数组,最终以JSON格式数据返回给前端。

$mname = explode(',',$moodname);//心情说明
$num = count($mname);
$mpic = explode(',',$moodpic);//心情图标
$id = (int)$_GET['id']; //文章或帖子id
$query = mysql_query("select * from mood where id=$id"); //查询对应的心情数据
$rs = mysql_fetch_array($query);
if($rs){
 //得到发表心情的总量
 $total = $rs['mood0']+$rs['mood1']+$rs['mood2']+$rs['mood3']+$rs['mood4']+
$rs['mood5']+$rs['mood6']+$rs['mood7'];
 for($i=0;$i<$num;$i++){
 $field = 'mood'.$i; //字段名
 $m_val = intval($rs[$field]); //心情对应的值(次数)
 $height = 0; //柱图高度
 if($total && $m_val){
 $height=round(($m_val/$total)*$moodpicheight); //计算高度
 }
 
 $arr[] = array(
 'mid' => $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.html中要先载入jquery.js库,目前1.8版本已经发布了哦,可以到官网http://jquery.com/下载。
接着我们向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', //数据类型为json
 error: function(){
 alert('出错了!');
 },
 success: function(json){ //请求成功后
 if(json){
 $.each(json,function(index,array){ //遍历json数据列
 var str = "<li><span>"+array['mood_val']+"</span><div class="pillar" 
style="height:"+array['height']+"px;"></div><div class="face" 
rel=""+array['mid']+""><img src="images/"+array['mood_pic']+"">
<br/>"+array['mood_name']+"</div></li>";
  $("#mood ul").append(str); //将数据加入到#mood ul列表中
  }); 
 }
 }
 });
 ...
});

这样,我们在访问index.html后,页面会载入心情列表,当然要想看到最终排列效果,还需要CSS,本文不讲解相关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
 //提交post请求
 $.post("mood.php?action=send",{moodid:mid,id:1},function(data){
 if(data>0){
 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);
 }
 });
});

没看明白的童鞋可以下载源码仔细研究,点击文章开头的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);
Javascript 相关文章推荐
如何实现iframe(嵌入式帧)的自适应高度
Jul 26 Javascript
基于Jquery实现表格动态分页实现代码
Jun 21 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
Apr 15 Javascript
Jquery获取和修改img的src值的方法
Feb 17 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
Aug 31 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
Nov 07 Javascript
seajs中模块依赖的加载处理实例分析
Oct 10 Javascript
layui获取多选框中的值方法
Aug 15 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
Sep 28 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
Oct 19 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
Oct 25 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 Javascript
js实现简单秒表走动的时钟特效
Mar 25 #Javascript
javascript实现鼠标放上后下边对应内容变换的效果
Aug 06 #Javascript
JS实现跟随鼠标的链接文字提示框效果
Aug 06 #Javascript
jquery实现仿新浪微博评论滚动效果
Aug 06 #Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
Aug 06 #Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
Aug 06 #Javascript
JavaScript淡入淡出渐变简单实例
Aug 06 #Javascript
You might like
绿山咖啡和蓝山咖啡
2021/03/04 新手入门
php截取utf-8中文字符串乱码的解决方法
2010/03/29 PHP
解析zend Framework如何自动加载类
2013/06/28 PHP
php实现批量下载百度云盘文件例子分享
2014/04/10 PHP
destoon二次开发入门示例
2014/06/20 PHP
ThinkPHP 3.2 数据分页代码分享
2014/10/14 PHP
PHP实现获取文件后缀名的几种常用方法
2015/08/08 PHP
php提高网站效率的技巧
2015/09/29 PHP
php事务回滚简单实现方法示例
2017/03/28 PHP
js查找节点的方法小结
2015/01/13 Javascript
纯javascript实现四方向文本无缝滚动效果
2015/06/16 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
2016/01/28 Javascript
ES6入门教程之Iterator与for...of循环详解
2017/05/17 Javascript
微信小程序之多文件下载的简单封装示例
2018/01/29 Javascript
jquery实现垂直无限轮播的方法分析
2019/07/16 jQuery
讲解python参数和作用域的使用
2013/11/01 Python
Python中常见的数据类型小结
2015/08/29 Python
探究python中open函数的使用
2016/03/01 Python
python实现用户登录系统
2016/05/21 Python
python对json的相关操作实例详解
2017/01/04 Python
python使用Apriori算法进行关联性解析
2017/12/21 Python
在python中实现将一张图片剪切成四份的方法
2018/12/05 Python
Python Matplotlib 基于networkx画关系网络图
2019/07/10 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
Python配置文件处理的方法教程
2019/08/29 Python
基于python+selenium自动健康打卡的实现代码
2021/01/13 Python
加拿大最大的五金、家居装修和园艺产品商店:RONA
2017/01/27 全球购物
ProBikeKit新西兰:自行车套件,跑步和铁人三项装备
2017/04/05 全球购物
Jowissa官方网站:瑞士制造的手表,优雅简约的设计
2020/07/29 全球购物
竞选学委演讲稿
2014/09/13 职场文书
安徽导游词
2015/02/12 职场文书
毕业设计答辩开场白
2015/05/29 职场文书
小学英语新课改心得体会
2016/01/22 职场文书
python缺失值的解决方法总结
2021/06/09 Python
Python办公自动化解决world文件批量转换
2021/09/15 Python
mysql 获取时间方式
2022/03/20 MySQL