如果你上網(wǎng)易或QQ網(wǎng)站都會看到文章頁面有很多種支持和反對的功能,我們可以發(fā)表自己的意見,那么要如何實現(xiàn)文章支持和反對的功能,下面我來介紹利用ajax快速實現(xiàn).

我是用wp做二次開發(fā)的,當然你也可以裝插件,不過我是自己定制的了,實現(xiàn)代碼：

首先在數(shù)據(jù)庫表wp_posts添加兩個字段like 和un like

PHP實例代碼如下:

1. public function dolike_unlike(){  
2.         $b = M();  
3.         $input = new input();  
4.         $id = $input->post('id');//過濾提交的信息。防止sql注入，之前發(fā)的代碼我都補上了。  
5.         //$id = 5524;  
6.         $val = $_POST['data'];  
7.         if($val==1){  
8.         $b->query("update `wp_posts` set `like` =`like`+1 WHERE id = $id");//點擊like的更新     
9.             }else if($val==0){  
10.             $b->query("update `wp_posts` set `unlike` =`unlike`+1 WHERE id = $id");  //dislike更新  
11.                 }else{  
12.                     $this->error('error');  
13.                     }  
14.         $list = $b->query("SELECT `like`,`unlike` FROM `wp_posts` WHERE id = $id");//獲取數(shù)據(jù)  
15.         $like = $list[0]['like'];  
16.         $dislike = $list[0]['unlike'];  
17.         if($like!=0 || $dislike!=0){//計算  
18.             $elike = $like/($like+$dislike);  
19.             $elike = substr($elike*100,0,4);  
20.             $edislike = $dislike/($like+$dislike);  
21.             $edislike = substr($edislike*100,0,4);  
22.             }  
23.         //echo $elike;  
24.         $output = array(//組合函數(shù)待輸出  
25.             likenum=>$like,  
26.             dislikenum=>$dislike,  
27.             like=>$elike,  
28.             dislike=>$edislike 
29.         );  
30.         //echo $list;  
31.         //dump($output);  
32.         $this->ajaxReturn($output,'success',1);//輸出  
33.         //echo 'ok';  
34.         //$this->display('');  
35.         }  

html實例代碼如下:

1. <div class="cl"></div>  
2.                     <style>  
3.                   .recomm{ border-bottom:4px solid #FF7523; color:#FF7523}  
4.                   .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;}  
5.                   .single_share_class .comm_num{ padding:12px 0 48px 0px}  
6.                   .single_share_class .comm_num span{ font-size:10px; line-height:11px; color:#ff9853; display:block}  
7.                   .single_share_class >span >span >span{ margin-bottom:7px !important;}  
8.                   .single_share_class .copylink{ padding:28px 0 0 0; cursor:pointer}  
9.                   .single_share_class .st_sharethis_large >span >span{ background:none !important}  
10.                   .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; }  
11.                   .dingandcai .left_like{ width:224px; float:left;height:62px; position:relative}  
12.                   .dingandcai .left_like span,.dingandcai .right_unlike span{ position:relative; z-index:2}  
13.                   .dingandcai .dingload{ width:78px; float:left; }  
14.                   .dingandcai .right_unlike{ width:224px; float:left; height:62px;position:relative }  
15.                   .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}  
16.                   .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}  
17.                   .allow_click,.disallow_click{cursor:pointer}  
18.                   </style>   
19.                   <div class="dingandcai">  
20.                   <div class="left_like"  val="1" postid="<?php the_ID(); ?>">  
21.                   <div class="left_con"></div><span id="like">Like</span>                     
22.                   </div>  
23.                   <div class="dingload">  
24.                   <img src="/img/loading_sm.gif" />&nbsp;  
25.                   </div>  
26.                   <div class="right_unlike"  val="0" postid="<?php the_ID(); ?>">  
27.                   <div class="right_con"></div>  
28.                   <span id="dislike">Dislike</span>  
29.                   </div>  
30.                   </div>  
31.                   <div class="cl"></div> 

js實例代碼如下:

1. jQuery(".dingload img").ajaxStart(function(){//ajax提示  
2.         jQuery(this).show();  
3.         });  
4.     jQuery(".dingload img").ajaxStop(function(){  
5.         jQuery(this).hide();  
6.         });   
7.     var pid = jQuery(".left_like").attr("postid");    
8.     var likecookie = jQuery.cookie("like"+pid);  
9.     if(likecookie!=pid){//判斷是否點擊過，如果沒有點擊則  
10.             jQuery(".left_like,.right_unlike").addClass("allow_click");  
11.             jQuery.get('/cityosweb/default.php/Shanmao/wplike_unlike',{id:pid},function(data){  
12.                     if(data.status==1){//顯示背景百分比和like dislike字樣  
13.                         jQuery(".left_like .left_con").css("width",data.data.like+"%");  
14.                         jQuery(".right_unlike .right_con").css("width",data.data.dislike+"%");  
15.                         }  
16.                     },"json");  
17.             }else{//如果已經(jīng)投過票了則         
18.                 jQuery(".left_like,.right_unlike").addClass("disallow_click");        
19.                 jQuery.get('/cityosweb/default.php/Shanmao/wplike_unlike',{id:pid},function(data){  
20.                     if(data.status==1){//顯示背景百分比和投票數(shù)  
21.                         //alert(data.likenum);  
22.                         jQuery("#like").html(data.data.likenum);  
23.                         jQuery("#dislike").html(data.data.dislikenum);  
24.                         jQuery(".left_like .left_con").css("width",data.data.like+"%");  
25.                         jQuery(".right_unlike .right_con").css("width",data.data.dislike+"%");  
26.                         }  
27.                     },"json");  
28.                 }  
29.     jQuery(".left_like,.right_unlike").click(function(){  
30.         if(jQuery(this).hasClass("allow_click")){//如果有這個class才提交  
31.             var val = jQuery(this).attr("val");  
32.             var postid = jQuery(this).attr("postid");  
33.             jQuery.post('/cityosweb/default.php/Shanmao/dolike_unlike',{data:val,id:postid},function(data){//點擊的時候  
34.             if(data.status==1){//成功返回處理  
35.                         jQuery("#like").html(data.data.likenum);  
36.                         jQuery("#dislike").html(data.data.dislikenum);  
37.                         jQuery(".left_like .left_con").css("width",data.data.like+"%");  
38.                         jQuery(".right_unlike .right_con").css("width",data.data.dislike+"%");  
39.             jQuery(".left_like,.right_unlike").removeClass("allow_click").addClass("disallow_click"); 
40.             jQuery.cookie('like'+postid,postid,{expires: 1});//提交后寫入cookie，這里是用juqery.cookie插件。保存一天時間，每篇文章保存不一樣的id。值隨意，只要你上面好做判斷。  
41.             }else{  
42.                 alert(data.info);  
43.                 }  
44.                 },"json");  
45.         }  
46.         });  
47.     jQuery(".disallow_click").live("click",function(){//不允許提交時候彈出  
48.         alert("Your vote has already been submitted!");  
49.         });