ajax应用-心情投票

ajax应用-心情投票，早期的源代码

 

 

代码如下：

index.html:

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<script language = “JavaScript” src =”jquery.js”></script>
<script language = “JavaScript”>
var imga = “images/pre_02.gif”;
var imgb = “images/pre_01.gif”;
var color1 = “#666666″;
var color2 = “#EB610E”;
var heightz = 80;
var hmax = 0;
var hmaxpx = 0;
var heightarr = new Array();
var moodzs = 0;

$(function(){
$.ajax({
type: “get”,
url: “xinqing.php”,
data: “&action=show”,
success: function(date) {
var moodarr = date.split(“,”);
for(j=0;j<8;j++) {
moodzs += parseInt(moodarr[j]); //投票总数
}
for(k=1;k<=8;k++) {
moodarr[k] = parseInt(moodarr[k]);
heightarr[k]= Math.round(moodarr[k]/moodzs*heightz);
$(“#moodinfo”+k).html(“<span style=’color: “+color2+”;’>”+moodarr[k-1]+”</span><br><img src=’”+imgb+”‘ width=’20′ height=’”+heightarr[k-1]+”‘>”);
}
}
});

$(“input[name='radio']“).click(function(){
$.ajax({
type: “get”,
url: “xinqing.php”,
data: “&action=mood&typee=”+this.value,
success: function(date) {
var moodarr = date.split(“,”);
for(k=0;k<=7;k++) {
moodarr[k] = parseInt(moodarr[k]);
heightarr[k]= Math.ceil(moodarr[k]/moodzs*heightz);
$(“#moodinfo”+(k+1)).html(“<span style=’color: “+color2+”;’>”+moodarr[k]+”</span><br><img src=’”+imgb+”‘ width=’20′ height=’”+heightarr[k]+”‘>”);
}
}
});
});
});
</script>
<table width=’528′ border=’0′ cellpadding=’0′ cellspacing=’2′ style=’font-size:12px;margin-top: 20px;margin-bottom: 20px;’>
<tr>
<td colspan=’8′ id=’moodtitle’ class=’left’></td>
</tr>

<tr align=’center’ valign=’bottom’>
<td height=30 id=’moodinfo1′></td>
<td height=30 id=’moodinfo2′></td>
<td height=30 id=’moodinfo3′></td>
<td height=30 id=’moodinfo4′></td>
<td height=30 id=’moodinfo5′></td>
<td height=30 id=’moodinfo6′></td>
<td height=30 id=’moodinfo7′></td>
<td height=30 id=”moodinfo8″></td>
</tr>

<tr align=”center” valign=”middle”>
<td><img src=”images/1.gif” width=40 height=40></td>
<td><img src=”images/2.gif” width=40 height=40></td>
<td><img src=”images/3.gif” width=40 height=40></td>
<td><img src=”images/4.gif” width=40 height=40></td>
<td><img src=”images/5.gif” width=40 height=40></td>
<td><img src=”images/6.gif” width=40 height=40></td>
<td><img src=”images/7.gif” width=40 height=40></td>
<td><img src=”images/8.gif” width=40 height=40></td>
</tr>

<tr align=”center”>
<td >欠揍</td>
<td >支持</td>
<td >很棒</td>
<td >愤怒</td>
<td >搞笑</td>
<td >恶心</td>
<td >不解</td>
<td >惊呀</td>
</tr>

<tr align=”center”>
<td><input  type=”radio” name=”radio”  value=”1″></td>
<td><input  type=”radio” name=”radio”  value=”2″></td>
<td><input  type=”radio” name=”radio”  value=”3″></td>
<td><input  type=”radio” name=”radio”  value=”4″></td>
<td><input  type=”radio” name=”radio”  value=”5″></td>
<td><input  type=”radio” name=”radio”  value=”6″></td>
<td><input  type=”radio” name=”radio”  value=”7″></td>
<td><input  type=”radio” name=”radio”  value=”8″></td>
</tr>
</table>

 

xinqing.php:

<?php
header(‘Content-type: text/html; charset=utf-8′);

//本测试没有数据库，实际中数据取自数据库
$action=$_GET['action'];
$typee=$_GET['type'];

if($action==”show”)
{
echo “1,2,2,4,8,8,2,20″;
}
if($action==”mood”)
{
echo “10,10,20,30,40,50,1,1″;
}
?>