投票喜欢/不喜欢 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