ajax应用-顶踩操作
ajax应用-顶踩操作，早期的源代码
代码如下,注意php文件数据没有model，实际中有数据库的支持，并且数据是动态获取的
Digg.html：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Digg</title>
<style type=”text/css”>
.digg {
height: auto;
width: 400px;
font-size:12px;
font-weight:normal;
}
.digg a {
display: block;
height: 48px;
width: 189px;
background-image: url(mark.gif);
background-repeat: no-repeat;
position: relative;
color: #000;
text-decoration: none;
}
.digg .good, .digg .bad {
margin:5px 10px 10px 0;
width:190px;
float:left;
}
.digg .good a {
background-position: -189px 0px;
}
.digg .good a:hover {
background-position: 0px 0px;
}
.digg .bad a {
background-position: -378px 0px;
}
.digg .bad a:hover {
background-position: -567px 0px;
}
.digg a p {
padding-left:30px;
line-height:25px;
}
.digg .bar {
background-color: white;
height: 5px;
left: 20px;
overflow: hidden;
position: absolute;
text-align: left;
top: 30px;
width: 55px;
}
.bar #g_img {
background-image: url(sprites.gif);
background-repeat: repeat-x;
height: 5px;
width: auto;
}
.bar #b_img {
background-image: url(sprites.gif);
background-repeat: repeat-x;
height: 5px;
width: auto;
background-position: 0px -5px;
}
.num {
color: #333;
font: normal normal 100 10px/12px Tahoma;
left: 80px;
position: absolute;
top: 26px;
}
.digg .good .bar {
border: 1px solid #40A300;
}
.digg .bad .bar {
border: 1px solid #555;
}
</style>
<script language=”javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
$(function(){
$.ajax({
type: “post”,
url: “test.php”,
success: function(date) {
date=date.split(“|”)
$(“#good_p”).html(date[0])
$(“#bad_p”).html(date[1])
$(“#g_img”).width(date[2])
$(“#b_img”).width(date[3])
}
});
});
$(function(){
$(“div:has(‘a’):not(.digg)”).click(function(){
$.ajax({
type: “post”,
url: “test.php”,
data: “&choose=” + $(this).attr(‘title’),
success: function(date) {
date=date.split(“|”)
$(“#good_p”).html(date[0])
$(“#bad_p”).html(date[1])
$(“#g_img”).width(date[2])
$(“#b_img”).width(date[3])
}
});
})
});
</script>
</head>
<body>
<div id=”digg”>
<div title=’good’>
<a href=”#”>
<p>这个文档不错</p>
<div>
<div id=”g_img”></div>
</div>
<span id=”good_p”></span>
</a>
</div>
<div title=’bad’>
<a href=”#”>
<p>文档有待改进</p>
<div>
<div id=”b_img”></div>
</div>
<span id=”bad_p”></span>
</a>
</div>
</div>
</body>
</html>
test.php：
<?php
//计算文章不错后的比例
if($_POST["choose"]==”good”)
{
echo “60%(5)|40%(5)|60%|40%”;
}
//计算文章有待改进后的比列
else if($_POST["choose"]==”bad”)
{
echo “40%(5)|60%(5)|40%|60%”;
}
//默认的比列
else
{
echo “50%(4)|50%(4)|50%|50%”;
}
?>
mark.gif：
sprites.gif：
