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

前端之家收集整理的这篇文章主要介绍了投票喜欢/不喜欢 ajax无刷新前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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


JavaScript Code
  1. <scripttype="text/javascript">
  2. $(document).ready(function()
  3. {
  4. $(".like").click(function()
  5. varid=$(this).attr("id");
  6. varname=$(this).attr("name");
  7. vardataString='id='+id+'&name='+name;
  8. $("#voteBox").slideDown("slow");
  9. $("#flash").fadeIn("slow");
  10. $.ajax
  11. ({
  12. type:"POST",
  13. url:"rating.PHP",
  14. data:dataString,
  15. cache:false,0);">success:function(html)
  16. {
  17. $("#flash").fadeOut("slow");
  18. $("#content").html(html);
  19. }
  20. });
  21. });
  22. $(".close").click(function()
  23. $("#voteBox").slideUp("slow");
  24. </script>

XML/HTML Code

    <divstyle="margin:50px">
  1. ahref="#"class="like"id="1"name="up">喜欢</a>--<ahref="#"class="like"id="1"name="down">不喜欢</a>
  2. divid="voteBox">
  3. spanid='close'><ahref="#"class="close"title="CloseThis">X</a></span>
  4. divstyle="height:13px">
  5. divid="flash">Loading........</div>
  6. </div>
  7. divid="content">
  8. div>

rating.PHP

PHP Code
    <?PHP
  1. include("conn.PHP");
  2. if($_POST['id'])
  3. $id=MysqL_escape_String($_POST['id']);
  4. $name=MysqL_escape_String($_POST['name']);
  5. MysqL_query("updatemessagesset$name=$name+1whereid='$id'");
  6. $result=MysqL_query("selectup,downfrommessageswhereid='$id'");
  7. $row=MysqL_fetch_array($result);
  8. $up_value=$row['up'];
  9. $down_value=$row['down'];
  10. $total=$up_value+$down_value;
  11. $up_per=($up_value*100)/$total;
  12. $down_per=($down_value*100)/$total;
  13. ?>
  14. <divstyle="margin-bottom:10px">
  15. <b>Ratingsforthisarticle</b>(<?PHPecho$total;?>total)
  16. </div>
  17. <tablewidth="700px">
  18. <tr>
  19. <tdwidth="30px"></td>
  20. <tdwidth="60px"><?PHPecho$up_value;?></td>
  21. <tdwidth="600px"><divid="greebar"style="width:<?PHPecho$up_per;?>%"></div></td>
  22. </tr>
  23. $down_value;?></td>
  24. <tdwidth="600px"><divid="redbar"style="width:<?PHPecho$down_per;?>%"></div></td>
  25. </table>
  26. <?PHP
  27. }
  28. ?>


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

猜你在找的Ajax相关文章