投票 赞踩
适合评论页面或者其他类似的地方,给鸡蛋或者鲜花等
数据库
SQL Code
- CREATE TABLE `voting_count` (
- `id` int(11) NOT NULL auto_increment,
- `unique_content_id` varchar(100) collate utf8_unicode_ci NOT NULL,
- `vote_up` int(11) NOT NULL,
- `vote_down` int(11) NOT NULL,
- PRIMARY KEY (`id`)
- ) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1 ;
XML/HTML Code
- <div class="content_wrapper">
- <h3>1
- <!-- voting markup -->
- <div class="voting_wrapper" id="1001">
- <div class="voting_btn">
- <div class="up_button"> </div><span class="up_votes">0</span>
- </div>
- <div class="voting_btn">
- <div class="down_button"> </div><span class="down_votes">0</span>
- </div>
- </div>
- <!-- voting markup end -->
- </h3>
- 各种下拉菜单,导航,多级菜单,右侧展开,左侧展开
- <h3>2
- <!-- voting markup -->
- <div class="voting_wrapper" id="1002">
- <div class="voting_btn">
- <div class="up_button"> </div><span class="up_votes">0</span>
- </div>
- <div class="voting_btn">
- <div class="down_button"> </div><span class="down_votes">0</span>
- </div>
- </div>
- <!-- voting markup end -->
- </h3>
- 翻页,分页,无刷新翻页,jquery翻页 本站演示中的分页数据库结构都一样的
- <h3>3
- <!-- voting markup -->
- <div class="voting_wrapper" id="1003">
- <div class="voting_btn">
- <div class="up_button"> </div><span class="up_votes">0</span>
- </div>
- <div class="voting_btn">
- <div class="down_button"> </div><span class="down_votes">0</span>
- </div>
- </div>
- <!-- voting markup end -->
- </h3>
- tab标签,选项卡,选卡,jquery选项卡,标签页,动态加载tab
- </div>
JavaScript Code
- <script type="text/javascript">
- $(document).ready(function() {
- //####### on page load, retrive votes for each content
- $.each( $('.voting_wrapper'), function(){
- //retrive unique id from this voting_wrapper element
- var unique_id = $(this).attr("id");
- //prepare post content
- post_data = {'unique_id':unique_id, 'vote':'fetch'};
- //send our data to "vote_process.php" using jQuery $.post()
- $.post('vote_process.php', post_data, function(response) {
- //retrive votes from server, replace each vote count text
- $('#'+unique_id+' .up_votes').text(response.vote_up);
- $('#'+unique_id+' .down_votes').text(response.vote_down);
- },'json');
- });
- //####### on button click, get user vote and send it to vote_process.php using jQuery $.post().
- $(".voting_wrapper .voting_btn").click(function (e) {
- //get class name (down_button / up_button) of clicked element
- var clicked_button = $(this).children().attr('class');
- //get unique ID from voted parent element
- var unique_id = $(this).parent().attr("id");
- if(clicked_button==='down_button') //user disliked the content
- {
- //prepare post content
- post_data = {'unique_id':unique_id, 'vote':'down'};
- //send our data to "vote_process.php" using jQuery $.post()
- $.post('vote_process.php', post_data, function(data) {
- //replace vote down count text with new values
- $('#'+unique_id+' .down_votes').text(data);
- //thank user for the dislike
- alert("Thanks! Each Vote Counts, Even Dislikes!");
- }).fail(function(err) {
- //alert user about the HTTP server error
- alert(err.statusText);
- });
- }
- else if(clicked_button==='up_button') //user liked the content
- {
- //prepare post content
- post_data = {'unique_id':unique_id, 'vote':'up'};
- //send our data to "vote_process.php" using jQuery $.post()
- $.post('vote_process.php', post_data, function(data) {
- //replace vote up count text with new values
- $('#'+unique_id+' .up_votes').text(data);
- //thank user for liking the content
- alert("Thanks! For Liking This Content.");
- }).fail(function(err) {
- //alert user about the HTTP server error
- alert(err.statusText);
- });
- }
- });
- //end
- });
- </script>
vote_process.php
PHP Code
- <?php
- require "../../conn.php";
- if($_POST)
- {
- ### connect to mySql
- //$sql_con = mysql_connect($db_host, $db_username, $db_password,$db_name)or die('could not connect to database');
- //get type of vote from client
- $user_vote_type = trim($_POST["vote"]);
- //get unique content ID and sanitize it (cos we never know).
- $unique_content_id = filter_var(trim($_POST["unique_id"]),FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_LOW | FILTER_FLAG_STRIP_HIGH);
- //Convert content ID to MD5 hash (optional)
- $unique_content_id = $unique_content_id;
- //check if its an ajax request, exit if not
- if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
- die();
- }
- switch ($user_vote_type)
- {
- ##### User liked the content #########
- case 'up':
- //check if user has already voted, determined by unique content cookie
- if (isset($_COOKIE["voted_".$unique_content_id]))
- {
- header('HTTP/1.1 500 Already Voted'); //cookie found, user has already voted
- exit(); //exit script
- }
- //get vote_up value from db using unique_content_id
- $result = mysql_query("SELECT vote_up FROM voting_count WHERE unique_content_id='$unique_content_id' LIMIT 1");
- $get_total_rows = mysql_fetch_assoc($result);
- if($get_total_rows)
- {
- //found record, update vote_up the value
- mysql_query("UPDATE voting_count SET vote_up=vote_up+1 WHERE unique_content_id='$unique_content_id'");
- }else{
- //no record found, insert new record in db
- mysql_query("INSERT INTO voting_count (unique_content_id, vote_up) value('$unique_content_id',1)");
- }
- setcookie("voted_".$unique_content_id, 1, time()+7200); // set cookie that expires in 2 hour "time()+7200".
- echo ($get_total_rows["vote_up"]+1); //display total liked votes
- break;
- ##### User disliked the content #########
- case 'down':
- //check if user has already voted, determined by unique content cookie
- if (isset($_COOKIE["voted_".$unique_content_id]))
- {
- header('HTTP/1.1 500 Already Voted this Content!'); //cookie found, user has already voted
- exit(); //exit script
- }
- //get vote_up value from db using unique_content_id
- $result = mysql_query("SELECT vote_down FROM voting_count WHERE unique_content_id='$unique_content_id' LIMIT 1");
- $get_total_rows = mysql_fetch_assoc($result);
- if($get_total_rows)
- {
- //found record, update vote_down the value
- mysql_query("UPDATE voting_count SET vote_down=vote_down+1 WHERE unique_content_id='$unique_content_id'");
- }else{
- //no record found, insert new record in db
- mysql_query("INSERT INTO voting_count (unique_content_id, vote_down) value('$unique_content_id',1)");
- }
- setcookie("voted_".$unique_content_id, 1, time()+7200); // set cookie that expires in 2 hour "time()+7200".
- echo ($get_total_rows["vote_down"]+1);//display total disliked votes
- break;
- ##### respond votes for each content #########
- case 'fetch':
- //get vote_up and vote_down value from db using unique_content_id
- $result = mysql_query("SELECT vote_up,vote_down FROM voting_count WHERE unique_content_id='$unique_content_id' LIMIT 1");
- $row = mysql_fetch_assoc($result);
- //making sure value is not empty.
- $vote_up = ($row["vote_up"])?$row["vote_up"]:0;
- $vote_down = ($row["vote_down"])?$row["vote_down"]:0;
- //build array for php json
- $send_response = array('vote_up'=>$vote_up, 'vote_down'=>$vote_down);
- echo json_encode($send_response); //display json encoded values
- break;
- }
- }
- ?>
原文地址:http://www.freejs.net/article_jquerywenzi_276.html