所属分类:网页特效,PHP实例-Ajax,UI/布局/瀑布流
本素材实现投票的流程:通过ajax获取心情图标及柱状图相关数据,当用户点击其中的一个心情图标时,向PHP后端Ajax.php发送请求,然后将mysql中对应的数据心情字段内容加1,成功后返回前端页面,并更新柱状图和统计数据。
1、HTML部分:
<div id="msg">div>
<div id=mood>
<ul>ul>
div>
#msg为操作提示区域
#mood为投票操作区域
ul为投票数据加载区域
2、PHP部分:
config.php为数据库、投票图片文字配置文件
$host="localhost";
$db_user="root"; //数据库用户名
$db_pass=""; //数据库用户密码
$db_name="scn_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分两部分。第一部分:发表心情,第二部分:获取心情相关信息。
PS:文件内有注释,可自行下载查看
3、jQuery部分:
向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 = ""+array['mood_val']+"+array['height']+"px;\">+array['mid']+"\">
+array['mood_pic']+"\">
"+array['mood_name']+" ";
$("#mood ul").append(str); //将数据加入到#mood ul列表中
});
}
}
});
...
});
我们在访问index.html后,页面会载入心情列表,当然要想看到最终排列效果。
接下来,我们有个交互动作,当点击对应的心情图标时,图标被标识为已发表,柱状图高度发生变化,并且上面的数字会+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);
}
});
});
CSS部分这里就不详细讲解,可下载素材后查看
4、数据库部分:
数据库结构已经打包到附件(demo_02.sql),可直接导入。也可直接执行以下SQL语句:
CREATE TABLE IF NOT EXISTS `demo_01` (
`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 `demo_01` (`id`, `mood0`, `mood1`, `mood2`, `mood3`, `mood4`, `mood5`, `mood6`, `mood7`)
VALUES(1, 8, 6, 20, 16, 6, 9, 15, 21);
可以了,有什么问题欢迎在下面留言