jQuery+PHP实现购物商城常用的星级评分效果，我们在商城平台购买商品后，会有个评分功能，本实例就来说说实现方法。

首先我们在.rate里面加入显示的灰星星p#big_rate、亮星星p#big_rate_up、分数span#s及span#g和提示信息p#my_rate。

接着我们写一个获取评分的方法get_rate() ：

1. function get_rate(rate) {  
2.  
3.     rate = rate.toString();  
4.  
5.     var s;  
6.  
7.     var g;  
8.  
9.     $("#g").show();  
10.  
11.     if (rate.length >= 3) {  
12.  
13.         s = 10;  
14.  
15.         g = 0;  
16.  
17.         $("#g").hide();  
18.  
19.     } else if (rate == "0") {  
20.  
21.         s = 0;  
22.  
23.         g = 0;  
24.  
25.     } else {  
26.  
27.         s = rate.substr(0, 1);  
28.  
29.         g = rate.substr(1, 1);  
30.  
31.     }  
32.  
33.     $("#s").text(s);  
34.  
35.     $("#g").text("." + g);  
36.  
37.     $(".big_rate_up").animate({  
38.  
39.         width: (parseInt(s) + parseInt(g) / 10) * 14,  
40.  
41.         height: 26  
42.  
43.     },  
44.  
45.     1000);  
46.  
47.     $(".big_rate span").each(function() {  
48.  
49.         $(this).mouseover(function() {  
50.  
51.             $(".big_rate_up").width($(this).attr("rate") * 14);  
52.  
53.             $("#s").text($(this).attr("rate"));  
54.  
55.             $("#g").text("");  
56.  
57.         }).click(function() {  
58.  
59.             var score = $(this).attr("rate");  
60.  
61.             $("#my_rate").html("您的评分：<span>" + score + "</span>");  
62.  
63.             $.ajax({  
64.  
65.                 type: "POST",  
66.  
67.                 url: "ajax.php",  
68.  
69.                 data: "score=" + score,  
70.  
71.                 success: function(msg) {  
72.  
73.                     //alert(msg);  
74.  
75.                     if (msg == 1) {  
76.  
77.                         $("#my_rate").html("<span>您已经评过分了！</span>");  
78.  
79.                     } else if (msg == 2) {  
80.  
81.                         $("#my_rate").html("<span>您评过分了！</span>");  
82.  
83.                     } else {  
84.  
85.                         get_rate(msg);  
86.  
87.                     }  
88.  
89.                 }  
90.  
91.             });  
92.  
93.         })  
94.  
95.     }) $(".big_rate").mouseout(function() {  
96.  
97.         $("#s").text(s);  
98.  
99.         $("#g").text("." + g);  
100.  
101.         $(".big_rate_up").width((parseInt(s) + parseInt(g) / 10) * 14);  
102.  
103.     })  
104.  
105. } 

然后直接调用该方法即可：

get_rate(<?php echo $aver; ?>);

ajax.php接收前端发送过来的分数值，通过cookie判断用户IP和评分时间，防止重复评分。

1. $score = $_POST['score'];  
2.  
3. if (isset($score)) {  
4.  
5.     $cookiestr = getip();  
6.  
7.     $time = time();  
8.  
9.     if (isset($_COOKIE['person']) && $_COOKIE['person'] == $cookiestr) {  
10.  
11.         echo "1";  
12.  
13.     } elseif (isset($_COOKIE['rate_time']) && ($time - intval($_COOKIE['rate_time'])) < 60) {  
14.  
15.         echo "2";  
16.  
17.     } else {  
18.  
19.         $query = mysql_query("update raty set voter=voter+1,total=total+'$score' where id=1");  
20.  
21.         $query = mysql_query("select * from raty where id=1");  
22.  
23.         $rs = mysql_fetch_array($query);  
24.  
25.         $aver = 0;  
26.  
27.         if ($rs) {  
28.  
29.             $aver = $rs['total'] / $rs['voter'];  
30.  
31.             $aver = round($aver, 1) * 10;  
32.  
33.         }  
34.  
35.         //设置COOKIE  
36.  
37.         setcookie("person", $cookiestr, time() + 3600 * 365);  
38.  
39.         setcookie("rate_time", time(), time() + 3600 * 365);  
40.  
41.         echo $aver;  
42.  
43.     }  
44.  
45. } 

raty表结构：

1. CREATE TABLE IF NOT EXISTS `raty` (   
2.  
3.    `id` int(11) NOT NULL auto_increment,   
4.  
5.    `voter` int(10) NOT NULL default '0' COMMENT '评分次数',   
6.  
7.   `total` int(11) NOT NULL default '0' COMMENT '总分',   
8.  
9.    PRIMARY KEY  (`id`)   
10.  
11.  ) ENGINE=MyISAM  DEFAULT CHARSET=utf8; 

最后记得在raty评分表里面加一条数据。

Tags: jQuery+PHP星级评分

分享到：