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 相关文章推荐
JavaScript 学习小结(适合新手参考)
Jul 30 Javascript
js动态添加表格数据使用insertRow和insertCell实现
May 22 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
Oct 30 Javascript
ECMAScript6函数默认参数
Jun 12 Javascript
JS针对Array的各种操作汇总
Nov 29 Javascript
JQuery实现定时刷新功能代码
May 09 jQuery
vue2.0全局组件之pdf详解
Jun 26 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
Oct 24 Javascript
Webpack中publicPath路径问题详解
May 03 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
May 16 Javascript
基于Node.js的大文件分片上传示例
Jun 19 Javascript
Element Backtop回到顶部的具体使用
Jul 27 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
无数据库的详细域名查询程序PHP版(5)
2006/10/09 PHP
php知道与问问的采集插件代码
2010/10/12 PHP
PHP文件读写操作之文件写入代码
2011/01/13 PHP
PHP反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
ThinkPHP中使用Ueditor富文本编辑器
2015/09/02 PHP
ThinkPHP5.0框架实现切换数据库的方法分析
2019/10/30 PHP
js中escape对应的C#解码函数 UrlDecode
2012/12/16 Javascript
使用js 设置url参数
2013/07/08 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
使用JavaScript获取Request中参数的值方法
2016/09/27 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
2017/05/24 Javascript
Vue2.0实现购物车功能
2017/06/05 Javascript
详解angularJS自定义指令间的相互交互
2017/07/05 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
2018/02/24 jQuery
实现一个 Vue 吸顶锚点组件方法
2019/07/10 Javascript
详解vue或uni-app的跨域问题解决方案
2020/02/21 Javascript
webpack+vue.js构建前端工程化的详细教程
2020/05/10 Javascript
javascript实现京东快递单号的查询效果
2020/11/30 Javascript
关于小程序优化的一些建议(小结)
2020/12/10 Javascript
[55:23]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
浅谈Python中range和xrange的区别
2017/12/20 Python
Tensorflow 同时载入多个模型的实例讲解
2018/07/27 Python
在Python dataframe中出生日期转化为年龄的实现方法
2018/10/20 Python
python高效过滤出文件夹下指定文件名结尾的文件实例
2018/10/21 Python
python网络编程之五子棋游戏
2020/05/14 Python
python合并多个excel文件的示例
2020/09/23 Python
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
2013/04/25 HTML / CSS
ASOS英国官网:英国在线时装和化妆品零售商
2017/05/19 全球购物
LN-CC美国:伦敦时尚生活的缩影
2019/02/19 全球购物
宏碁西班牙官网:Acer西班牙
2021/01/08 全球购物
高中生期末评语大全
2014/01/28 职场文书
秋季运动会广播稿大全
2014/02/17 职场文书
素质教育标语
2014/06/27 职场文书
就业协议书
2014/09/12 职场文书
集团财务总监岗位职责
2015/04/03 职场文书
Linux下使用C语言代码搭建一个简单的HTTP服务器
2022/04/13 Servers