ajax应用-无刷新打分

ajax应用-无刷新打分，早期的源代码

 

x1.jpg:        x2.jpg:

 

代码如下：

code.html:

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<SCRIPT LANGUAGE=”JavaScript” src=”jquery.js”></SCRIPT>
<div>
<h2>访客评分:</h2>
<div id=”score”></div>
<div id=”stars”>
<img src=”x2.jpg” onmouseover=”starshow(1);” onclick=”add(1);” />
<img src=”x2.jpg” onmouseover=”starshow(2);” onclick=”add(2);” />
<img src=”x2.jpg” onmouseover=”starshow(3);” onclick=”add(3);” />
<img src=”x2.jpg” onmouseover=”starshow(4);” onclick=”add(4);” />
<img src=”x2.jpg” onmouseover=”starshow(5);” onclick=”add(5);” />
<img src=”x2.jpg” onmouseover=”starshow(6);” onclick=”add(6);” />
<img src=”x2.jpg” onmouseover=”starshow(7);” onclick=”add(7);” />
<img src=”x2.jpg” onmouseover=”starshow(8);” onclick=”add(8);” />
<img src=”x2.jpg” onmouseover=”starshow(9);” onclick=”add(9);” />
<img src=”x2.jpg” onmouseover=”starshow(10);” onclick=”add(10);” />
<p>共<span id=”scorecount”></span>人评分[点击星星直接打分]</p>
</div>
</div>

<script type=”text/javascript”>
$(function(){
$.ajax({
url:”score.php?type=show“,
type:”post”,
data:{},
success:function(data){
var tt=data.split(“|”);
$(“#score”).html(tt[0]);
$(“#scorecount”).html(tt[1]);
starshow(8);
}
});
})

function starshow(num) {
for (var i = 0; i < 10; i++) {
$(“#stars>img”).eq(i).attr(“src” , “x2.jpg”);
}
for (var i = 0; i < num; i++) {
$(“#stars>img”).eq(i).attr(“src” , “x1.jpg”);
}
}

function add(num) {
$.ajax({
url:”score.php?type=add“,
type:”post”,
data:{num:num},
success:function(data){
var tt=data.split(“|”);
$(“#score”).html(tt[0]);
$(“#scorecount”).html(tt[1]);
}
});
}
</script>

 

score.php:

<?php
$action =$_REQUEST['type'];
$articleid =intval($_REQUEST['articleid']);

//如下是测试数据，实际中需要对数据库进行处理
if ($action==’show’){
echo “8.5|119″;
}

if ($action==’add’){
echo “8.44|120″;
}
?>