AJAX产品评论功能

最新推荐文章于 2022-09-16 15:22:48 发布

jxyuhua

最新推荐文章于 2022-09-16 15:22:48 发布

阅读量3.4k

点赞数

分类专栏： Web开发文章标签： ajax 产品 xmlhttprequest class function stylesheet

Web开发专栏收录该内容

32 篇文章

订阅专栏

模仿土豆网的等级评论功能

参考资料：

用css制作星级评分 http://www.blueidea.com/tech/web/2006/3624.asp

根据以上的文章，做了一点修改，最后的效果图：http://www.cn-cart.com/samples/rank/

闲话不多说，看代码

index.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> AJAX 评分功能 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<link href="styles.css" rel="stylesheet" type="text/css" media="all"/>
<script type="text/javascript" language="javascript" src="rank.js"></script>
</head>

<body>
<div id="result">给这个产品评分</div>
<ul class="star-rating">
<li><a href="#" title="没什么意思" class="one-star" οnclick="rank(1);" οnmοuseοver="tip(1);">1</a></li>
<li><a href="#" title="一般了" class="two-stars" οnclick="rank(2);" οnmοuseοver="tip(2);">2</a></li>
<li><a href="#" title="还不错" class="three-stars" οnclick="rank(3);" οnmοuseοver="tip(3);">3</a></li>
<li><a href="#" title="挺好的" class="four-stars" οnclick="rank(4);" οnmοuseοver="tip(4);">4</a></li>
<li><a href="#" title="很酷" class="five-stars" οnclick="rank(5);" οnmοuseοver="tip(5);">5</a></li>
</ul>
</body>
</html>

JS脚本文件rank.js

var http = createRequestObject();

function rank(rank) {
    http.open('get', 'rank.php?rank='+rank);
    http.onreadystatechange = handleResponse;
    http.send(null);
}

function tip(rank) {
    var tips = '';
switch(rank) {
  case 1:
   tips = '没什么意思';
      break;
  case 2:
   tips = '一般了';
      break;
  case 3:
   tips = '还不错';
      break;
  case 4:
   tips = '挺好的';
      break;
  case 5:
   tips = '很酷';
    }
document.getElementById("result").innerHTML = tips;
}

function handleResponse() {
    if(http.readyState == 4){
        var response = http.responseText;
        document.getElementById("result").innerHTML = response;
    }
}
document.getElementById("result").innerHTML = '给这个产品评分';

后台PHP文件rank.php

这里只有简单的显示一下，如果要实现你要的功能，可以另行完善。
<?php
$rank = $_REQUEST['rank'];
echo '你刚才打了 ' . $rank . ' 分';
?>

CSS样式表：styles.css

/*             styles for the star rater                */
body{
  color:#916F06;
}
.star-rating{
  list-style:none;
  margin: 0px;
  padding:0px;
  width: 100px;
  height: 20px;
  position: relative;
  background: url(images/star_rating.gif) top left repeat-x;
}
.star-rating li{
  padding:0px;
  margin:0px;
  /*/*/
  float: left;
  /* */
}
.star-rating li a{
  display:block;
  width:20px;
  height: 20px;
  text-decoration: none;
  text-indent: -9000px;
  z-index: 20;
  position: absolute;
  padding: 0px;
}
.star-rating li a:hover{
  background: url(images/star_rating.gif) left bottom;
  z-index: 1;
  left: 0px;
}
.star-rating a.one-star{
  left: 0px;
}
.star-rating a.one-star:hover{
  width:20px;
}
.star-rating a.two-stars{
  left:20px;
}
.star-rating a.two-stars:hover{
  width: 40px;
}
.star-rating a.three-stars:hover{
  width: 60px;
}
.star-rating a.three-stars{
  left: 40px;
}
.star-rating a.four-stars{
  left: 60px;
}
.star-rating a.four-stars:hover{
  width: 80px;
}
.star-rating a.five-stars{
  left: 80px;
}
.star-rating a.five-stars:hover{
  width: 100px;
}
#result{
  width:560px;
  font-family:"Times New Roman", Times, serif;
  font-size:12px;
  padding:5px 0 5px 15px;
  border-left:3px #D5C180 solid;
  background-color: #F8F4E9;
}