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

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

演示

JavaScript Code
<script?type="text/javascript">??
$(document).ready(function()??
{??
$(".like").click(function()??
{??
var?id=$(this).attr("id");??
var?name=$(this).attr("name");??
var?dataString?=?'id='+?id?+?'&name='+?name;??
$("#votebox").slideDown("slow");??
??
$("#flash").fadeIn("slow");??
??
$.ajax??
({??
type:?"POST",??
url:?"rating.php",??
data:?dataString,??
cache:?false,??
success:?function(html)??
{??
$("#flash").fadeOut("slow");??
$("#content").html(html);??
}???
});??
});??
??
$(".close").click(function()??
{??
$("#votebox").slideUp("slow");??
});??
??
});??
</script>??

XML/HTML Code
<div?style="margin:50px">??
??
<a?href="#"?class="like"?id="1"?name="up">喜欢</a>?--?<a?href="#"?class="like"?id="1"?name="down">不喜欢</a>??
<div?id="votebox">??
<span?id='close'><a?href="#"?class="close"?title="Close?This">X</a></span>??
<div?style="height:13px">??
<div?id="flash">Loading........</div>??
</div>??
<div?id="content">??
??
??
??
</div>??
??
</div>??

?rating.php

PHP Code
<?php??
include("conn.php");??
??
??
if($_POST['id'])??
{??
$id=mysql_escape_String($_POST['id']);??
$name=mysql_escape_String($_POST['name']);??
??
??
mysql_query("update?messages?set?$name=$name+1?where?id='$id'");??
??
??
$result=mysql_query("select?up,down?from?messages?where?id='$id'");??
$row=mysql_fetch_array($result);??
$up_value=$row['up'];??
$down_value=$row['down'];??
$total=$up_value+$down_value;??
??
$up_per=($up_value*100)/$total;??
$down_per=($down_value*100)/$total;??
?>??
<div?style="margin-bottom:10px">??
<b>Ratings?for?this?article</b>?(?<?php?echo?$total;??>?total)??
</div>??
<table?width="700px">??
??
<tr>??
<td?width="30px"></td>??
<td?width="60px"><?php?echo?$up_value;??></td>??
<td?width="600px"><div?id="greebar"?style="width:<?php?echo?$up_per;??>%"></div></td>??
</tr>??
??
<tr>??
<td?width="30px"></td>??
<td?width="60px"><?php?echo?$down_value;??></td>??
<td?width="600px"><div?id="redbar"?style="width:<?php?echo?$down_per;??>%"></div></td>??
</tr>??
??
</table>??
??
<?php??
??
}??
?>??

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