php 顶踩,php和jQuery实现文章页【顶】和【踩】的功能

第一次来这里发代码，自己写的代码，一直以来都是自学，从来没人理我.. 分享学习，大家给点意见 。感谢。

还有这里不能发图？

更详细：http://shanmao.me/?p=1225

1.[代码]前端js代码片段

jQuery(".dingload img").ajaxStart(function(){//ajax提示

jQuery(this).show();

});

jQuery(".dingload img").ajaxStop(function(){

jQuery(this).hide();

});

var pid = jQuery(".left_like").attr("postid");

var likecookie = jQuery.cookie("like"+pid);

if(likecookie!=pid){//判断是否点击过，如果没有点击则

jQuery(".left_like,.right_unlike").addClass("allow_click");

jQuery.get('/cityosweb/default.php/Shanmao/wplike_unlike',{id:pid},function(data){

if(data.status==1){//显示背景百分比和like dislike字样

jQuery(".left_like .left_con").css("width",data.data.like+"%");

jQuery(".right_unlike .right_con").css("width",data.data.dislike+"%");

}

},"json");

}else{//如果已经投过票了则

jQuery(".left_like,.right_unlike").addClass("disallow_click");

jQuery.get('/cityosweb/default.php/Shanmao/wplike_unlike',{id:pid},function(data){

if(data.status==1){//显示背景百分比和投票数

//alert(data.likenum);

jQuery("#like").html(data.data.likenum);

jQuery("#dislike").html(data.data.dislikenum);

jQuery(".left_like .left_con").css("width",data.data.like+"%");

jQuery(".right_unlike .right_con").css("width",data.data.dislike+"%");

}

},"json");

}

jQuery(".left_like,.right_unlike").click(function(){

if(jQuery(this).hasClass("allow_click")){//如果有这个class才提交

var val = jQuery(this).attr("val");

var postid = jQuery(this).attr("postid");

jQuery.post('/cityosweb/default.php/Shanmao/dolike_unlike',{data:val,id:postid},function(data){//点击的时候

if(data.status==1){//成功返回处理

jQuery("#like").html(data.data.likenum);

jQuery("#dislike").html(data.data.dislikenum);

jQuery(".left_like .left_con").css("width",data.data.like+"%");

jQuery(".right_unlike .right_con").css("width",data.data.dislike+"%");

jQuery(".left_like,.right_unlike").removeClass("allow_click").addClass("disallow_click");

jQuery.cookie('like'+postid,postid,{expires: 1});//提交后写入cookie，这里是用juqery.cookie插件。保存一天时间，每篇文章保存不一样的id。值随意，只要你上面好做判断。

}else{

alert(data.info);

}

},"json");

}

});

jQuery(".disallow_click").live("click",function(){//不允许提交时候弹出,可以关闭

alert("Your vote has already been submitted!");

});

2.[代码]后台处理代码

public function dolike_unlike(){

$b = M();

$input = new input();

$id = $input->post('id');//过滤提交的信息。防止sql注入。

//$id = 5524;

$val = $_POST['data'];

if($val==1){

$b->query("update `wp_posts` set `like` =`like`+1 WHERE id = $id");//点击like的更新

}else if($val==0){

$b->query("update `wp_posts` set `unlike` =`unlike`+1 WHERE id = $id"); //dislike更新

}else{

$this->error('error');

}

$list = $b->query("SELECT `like`,`unlike` FROM `wp_posts` WHERE id = $id");//获取数据

$like = $list[0]['like'];

$dislike = $list[0]['unlike'];

if($like!=0 || $dislike!=0){//计算

$elike = $like/($like+$dislike);

$elike = substr($elike*100,0,4);

$edislike = $dislike/($like+$dislike);

$edislike = substr($edislike*100,0,4);

}

//echo $elike;

$output = array(//组合函数待输出

likenum=>$like,

dislikenum=>$dislike,

like=>$elike,

dislike=>$edislike

);

//echo $list;

//dump($output);

$this->ajaxReturn($output,'success',1);//输出

//echo 'ok';

//$this->display('');

}

3.[代码]html代码

.recomm{ border-bottom:4px solid #FF7523; color:#FF7523}

.single_share_class{ position:absolute; left:-95px; top:80px; width:75px; height:328px; text-align:center; background:url(/img/single_page_share.png) no-repeat;}

.single_share_class .comm_num{ padding:12px 0 48px 0px}

.single_share_class .comm_num span{ font-size:10px; line-height:11px; color:#ff9853; display:block}

.single_share_class >span >span >span{ margin-bottom:7px !important;}

.single_share_class .copylink{ padding:28px 0 0 0; cursor:pointer}

.single_share_class .st_sharethis_large >span >span{ background:none !important}

.dingandcai{ width:526px; height:62px; background:url(/img/likeandunlike.jpg) no-repeat; margin:20px 0;line-height:62px; text-align:center; font-size:24px; text-shadow:1px 1px 1px #000; }

.dingandcai .left_like{ width:224px; float:left;height:62px; position:relative}

.dingandcai .left_like span,.dingandcai .right_unlike span{ position:relative; z-index:2}

.dingandcai .dingload{ width:78px; float:left; }

.dingandcai .right_unlike{ width:224px; float:left; height:62px;position:relative }

.dingandcai .left_like .left_con{ background:url(/img/likeandunlike.jpg) 0px -63px no-repeat; width:50%; height:62px;position:absolute;top:0;left:0; z-index:1}

.dingandcai .right_unlike .right_con{ background:url(/img/likeandunlike.jpg) -302px -63px no-repeat; width:50%; height:62px;position:absolute;top:0;left:0; z-index:1}

.allow_click,.disallow_click{cursor:pointer}

Like

 

Dislike