首页>>Jquery文字>>投票喜欢/不喜欢 ajax无刷新(2013-12-04)

投票喜欢/不喜欢 ajax无刷新

投票喜欢/不喜欢 ajax无刷新
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

JavaScript Code
  1. <script type="text/javascript">  
  2. $(document).ready(function()  
  3. {  
  4. $(".like").click(function()  
  5. {  
  6. var id=$(this).attr("id");  
  7. var name=$(this).attr("name");  
  8. var dataString = 'id='+ id + '&name='+ name;  
  9. $("#votebox").slideDown("slow");  
  10.   
  11. $("#flash").fadeIn("slow");  
  12.   
  13. $.ajax  
  14. ({  
  15. type: "POST",  
  16. url: "rating.php",  
  17. data: dataString,  
  18. cache: false,  
  19. success: function(html)  
  20. {  
  21. $("#flash").fadeOut("slow");  
  22. $("#content").html(html);  
  23. }   
  24. });  
  25. });  
  26.   
  27. $(".close").click(function()  
  28. {  
  29. $("#votebox").slideUp("slow");  
  30. });  
  31.   
  32. });  
  33. </script>  

 

XML/HTML Code
  1. <div style="margin:50px">  
  2.   
  3. <a href="#" class="like" id="1" name="up">喜欢</a> -- <a href="#" class="like" id="1" name="down">不喜欢</a>  
  4. <div id="votebox">  
  5. <span id='close'><a href="#" class="close" title="Close This">X</a></span>  
  6. <div style="height:13px">  
  7. <div id="flash">Loading........</div>  
  8. </div>  
  9. <div id="content">  
  10.   
  11.   
  12.   
  13. </div>  
  14.   
  15. </div>  

 rating.php

PHP Code
  1. <?php  
  2. include("conn.php");  
  3.   
  4.   
  5. if($_POST['id'])  
  6. {  
  7. $id=mysql_escape_String($_POST['id']);  
  8. $name=mysql_escape_String($_POST['name']);  
  9.   
  10.   
  11. mysql_query("update messages set $name=$name+1 where id='$id'");  
  12.   
  13.   
  14. $result=mysql_query("select up,down from messages where id='$id'");  
  15. $row=mysql_fetch_array($result);  
  16. $up_value=$row['up'];  
  17. $down_value=$row['down'];  
  18. $total=$up_value+$down_value;  
  19.   
  20. $up_per=($up_value*100)/$total;  
  21. $down_per=($down_value*100)/$total;  
  22. ?>  
  23. <div style="margin-bottom:10px">  
  24. <b>Ratings for this article</b> ( <?php echo $total; ?> total)  
  25. </div>  
  26. <table width="700px">  
  27.   
  28. <tr>  
  29. <td width="30px"></td>  
  30. <td width="60px"><?php echo $up_value; ?></td>  
  31. <td width="600px"><div id="greebar" style="width:<?php echo $up_per; ?>%"></div></td>  
  32. </tr>  
  33.   
  34. <tr>  
  35. <td width="30px"></td>  
  36. <td width="60px"><?php echo $down_value; ?></td>  
  37. <td width="600px"><div id="redbar" style="width:<?php echo $down_per; ?>%"></div></td>  
  38. </tr>  
  39.   
  40. </table>  
  41.   
  42. <?php  
  43.   
  44. }  
  45. ?>  

 


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