首页>>Jquery文字>>投票 赞踩(2014-02-27)

投票 赞踩

 适合评论页面或者其他类似的地方,给鸡蛋或者鲜花等

数据库

 

SQL Code
  1. CREATE TABLE `voting_count` (  
  2.   
  3.   `id` int(11) NOT NULL auto_increment,  
  4.   
  5.   `unique_content_id` varchar(100) collate utf8_unicode_ci NOT NULL,  
  6.   
  7.   `vote_up` int(11) NOT NULL,  
  8.   
  9.   `vote_down` int(11) NOT NULL,  
  10.   
  11.   PRIMARY KEY  (`id`)  
  12.   
  13. ) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1 ;  

 

投票 赞踩
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="content_wrapper">  
  2.     <h3>1  
  3.         <!-- voting markup -->  
  4.         <div class="voting_wrapper" id="1001">  
  5.             <div class="voting_btn">  
  6.                 <div class="up_button"> </div><span class="up_votes">0</span>  
  7.             </div>  
  8.             <div class="voting_btn">  
  9.                 <div class="down_button"> </div><span class="down_votes">0</span>  
  10.             </div>  
  11.         </div>  
  12.         <!-- voting markup end -->  
  13.     </h3>  
  14.     各种下拉菜单,导航,多级菜单,右侧展开,左侧展开  
  15.       
  16.       
  17.     <h3>2  
  18.         <!-- voting markup -->  
  19.         <div class="voting_wrapper" id="1002">  
  20.             <div class="voting_btn">  
  21.                 <div class="up_button"> </div><span class="up_votes">0</span>  
  22.             </div>  
  23.             <div class="voting_btn">  
  24.                 <div class="down_button"> </div><span class="down_votes">0</span>  
  25.             </div>  
  26.         </div>  
  27.         <!-- voting markup end -->  
  28.     </h3>  
  29.    翻页,分页,无刷新翻页,jquery翻页 本站演示中的分页数据库结构都一样的  
  30.     <h3>3  
  31.         <!-- voting markup -->  
  32.         <div class="voting_wrapper" id="1003">  
  33.             <div class="voting_btn">  
  34.                 <div class="up_button"> </div><span class="up_votes">0</span>  
  35.             </div>  
  36.             <div class="voting_btn">  
  37.                 <div class="down_button"> </div><span class="down_votes">0</span>  
  38.             </div>  
  39.         </div>  
  40.         <!-- voting markup end -->  
  41.     </h3>  
  42.     tab标签,选项卡,选卡,jquery选项卡,标签页,动态加载tab  
  43.   
  44. </div>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2. $(document).ready(function() {  
  3.       
  4.     //####### on page load, retrive votes for each content  
  5.     $.each( $('.voting_wrapper'), function(){  
  6.           
  7.         //retrive unique id from this voting_wrapper element  
  8.         var unique_id = $(this).attr("id");  
  9.           
  10.         //prepare post content  
  11.         post_data = {'unique_id':unique_id, 'vote':'fetch'};  
  12.           
  13.         //send our data to "vote_process.php" using jQuery $.post()  
  14.         $.post('vote_process.php', post_data,  function(response) {  
  15.           
  16.                 //retrive votes from server, replace each vote count text  
  17.                 $('#'+unique_id+' .up_votes').text(response.vote_up);   
  18.                 $('#'+unique_id+' .down_votes').text(response.vote_down);  
  19.             },'json');  
  20.     });  
  21.   
  22.       
  23.       
  24.     //####### on button click, get user vote and send it to vote_process.php using jQuery $.post().  
  25.     $(".voting_wrapper .voting_btn").click(function (e) {  
  26.           
  27.         //get class name (down_button / up_button) of clicked element  
  28.         var clicked_button = $(this).children().attr('class');  
  29.           
  30.         //get unique ID from voted parent element  
  31.         var unique_id   = $(this).parent().attr("id");   
  32.           
  33.         if(clicked_button==='down_button'//user disliked the content  
  34.         {  
  35.             //prepare post content  
  36.             post_data = {'unique_id':unique_id, 'vote':'down'};  
  37.               
  38.             //send our data to "vote_process.php" using jQuery $.post()  
  39.             $.post('vote_process.php', post_data, function(data) {  
  40.                   
  41.                 //replace vote down count text with new values  
  42.                 $('#'+unique_id+' .down_votes').text(data);  
  43.                   
  44.                 //thank user for the dislike  
  45.                 alert("Thanks! Each Vote Counts, Even Dislikes!");  
  46.                   
  47.             }).fail(function(err) {   
  48.               
  49.             //alert user about the HTTP server error  
  50.             alert(err.statusText);   
  51.             });  
  52.         }  
  53.         else if(clicked_button==='up_button'//user liked the content  
  54.         {  
  55.             //prepare post content  
  56.             post_data = {'unique_id':unique_id, 'vote':'up'};  
  57.               
  58.             //send our data to "vote_process.php" using jQuery $.post()  
  59.             $.post('vote_process.php', post_data, function(data) {  
  60.               
  61.                 //replace vote up count text with new values  
  62.                 $('#'+unique_id+' .up_votes').text(data);  
  63.                   
  64.                 //thank user for liking the content  
  65.                 alert("Thanks! For Liking This Content.");  
  66.             }).fail(function(err) {   
  67.               
  68.             //alert user about the HTTP server error  
  69.             alert(err.statusText);   
  70.             });  
  71.         }  
  72.           
  73.     });  
  74.     //end   
  75.       
  76.       
  77.       
  78. });  
  79.   
  80.   
  81. </script>  

vote_process.php

 

PHP Code
  1. <?php  
  2. require "../../conn.php";  
  3.   
  4. if($_POST)  
  5. {  
  6.           
  7.     ### connect to mySql  
  8.     //$sql_con = mysql_connect($db_host, $db_username, $db_password,$db_name)or die('could not connect to database');  
  9.   
  10.     //get type of vote from client  
  11.     $user_vote_type = trim($_POST["vote"]);  
  12.       
  13.     //get unique content ID and sanitize it (cos we never know).  
  14.     $unique_content_id = filter_var(trim($_POST["unique_id"]),FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_LOW | FILTER_FLAG_STRIP_HIGH);  
  15.       
  16.     //Convert content ID to MD5 hash (optional)  
  17.     $unique_content_id = $unique_content_id;  
  18.       
  19.     //check if its an ajax request, exit if not  
  20.     if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {  
  21.         die();  
  22.     }   
  23.       
  24.   
  25.     switch ($user_vote_type)  
  26.     {             
  27.           
  28.         ##### User liked the content #########  
  29.         case 'up':   
  30.               
  31.             //check if user has already voted, determined by unique content cookie  
  32.             if (isset($_COOKIE["voted_".$unique_content_id]))  
  33.             {  
  34.                 header('HTTP/1.1 500 Already Voted'); //cookie found, user has already voted  
  35.                 exit(); //exit script  
  36.             }  
  37.               
  38.             //get vote_up value from db using unique_content_id  
  39.             $result = mysql_query("SELECT vote_up FROM voting_count WHERE unique_content_id='$unique_content_id' LIMIT 1");  
  40.             $get_total_rows = mysql_fetch_assoc($result);  
  41.               
  42.             if($get_total_rows)  
  43.             {  
  44.                 //found record, update vote_up the value  
  45.                 mysql_query("UPDATE voting_count SET vote_up=vote_up+1 WHERE unique_content_id='$unique_content_id'");  
  46.             }else{  
  47.                 //no record found, insert new record in db  
  48.                 mysql_query("INSERT INTO voting_count (unique_content_id, vote_up) value('$unique_content_id',1)");  
  49.             }  
  50.               
  51.             setcookie("voted_".$unique_content_id, 1, time()+7200); // set cookie that expires in 2 hour "time()+7200".  
  52.             echo ($get_total_rows["vote_up"]+1); //display total liked votes  
  53.             break;    
  54.           
  55.         ##### User disliked the content #########  
  56.         case 'down':   
  57.               
  58.             //check if user has already voted, determined by unique content cookie  
  59.             if (isset($_COOKIE["voted_".$unique_content_id]))  
  60.             {  
  61.                 header('HTTP/1.1 500 Already Voted this Content!'); //cookie found, user has already voted  
  62.                 exit(); //exit script  
  63.             }  
  64.   
  65.             //get vote_up value from db using unique_content_id  
  66.             $result = mysql_query("SELECT vote_down FROM voting_count WHERE unique_content_id='$unique_content_id' LIMIT 1");  
  67.             $get_total_rows = mysql_fetch_assoc($result);  
  68.               
  69.             if($get_total_rows)  
  70.             {  
  71.                 //found record, update vote_down the value  
  72.                 mysql_query("UPDATE voting_count SET vote_down=vote_down+1 WHERE unique_content_id='$unique_content_id'");  
  73.             }else{  
  74.                   
  75.                 //no record found, insert new record in db  
  76.                 mysql_query("INSERT INTO voting_count (unique_content_id, vote_down) value('$unique_content_id',1)");  
  77.             }  
  78.               
  79.             setcookie("voted_".$unique_content_id, 1, time()+7200);  // set cookie that expires in 2 hour "time()+7200".  
  80.             echo ($get_total_rows["vote_down"]+1);//display total disliked votes  
  81.             break;    
  82.           
  83.         ##### respond votes for each content #########        
  84.         case 'fetch':  
  85.             //get vote_up and vote_down value from db using unique_content_id  
  86.             $result = mysql_query("SELECT vote_up,vote_down FROM voting_count WHERE unique_content_id='$unique_content_id' LIMIT 1");  
  87.             $row = mysql_fetch_assoc($result);  
  88.               
  89.             //making sure value is not empty.  
  90.             $vote_up    = ($row["vote_up"])?$row["vote_up"]:0;   
  91.             $vote_down  = ($row["vote_down"])?$row["vote_down"]:0;  
  92.               
  93.             //build array for php json  
  94.             $send_response = array('vote_up'=>$vote_up'vote_down'=>$vote_down);  
  95.             echo json_encode($send_response); //display json encoded values  
  96.             break;  
  97.   
  98.     }  
  99.   
  100. }  
  101. ?>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_276.html