ImageVerifierCode 换一换
格式:DOC , 页数:5 ,大小:75KB ,
资源ID:7350489      下载积分:10 金币
快捷下载
登录下载
邮箱/手机:
温馨提示:
快捷下载时,用户名和密码都是您填写的邮箱或者手机号,方便查询和重复下载(系统自动生成)。 如填写123,账号就是123,密码也是123。
特别说明:
请自助下载,系统不会自动发送文件的哦; 如果您已付费,想二次下载,请登录后访问:我的下载记录
支付方式: 支付宝    微信支付   
验证码:   换一换

加入VIP,免费下载
 

温馨提示:由于个人手机设置不同,如果发现不能下载,请复制以下地址【https://www.docduoduo.com/d-7350489.html】到电脑端继续下载(重复下载不扣费)。

已注册用户请登录:
账号:
密码:
验证码:   换一换
  忘记密码?
三方登录: 微信登录   QQ登录   微博登录 

下载须知

1: 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。
2: 试题试卷类文档,如果标题没有明确说明有答案则都视为没有答案,请知晓。
3: 文件的所有权益归上传用户所有。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 本站仅提供交流平台,并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

版权提示 | 免责声明

本文(PHP+jQuery+Ajax+Mysql实现发表心情功能.doc)为本站会员(myk79025)主动上传,道客多多仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。 若此文所含内容侵犯了您的版权或隐私,请立即通知道客多多(发送邮件至docduoduo@163.com或直接QQ联系客服),我们立即给予删除!

PHP+jQuery+Ajax+Mysql实现发表心情功能.doc

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);

本站链接:文库   一言   我酷   合作


客服QQ:2549714901微博号:道客多多官方知乎号:道客多多

经营许可证编号: 粤ICP备2021046453号世界地图

道客多多©版权所有2020-2025营业执照举报