php+jquery实现ajax星级评价教程

发布于，归属于jquery教程。 沙发还空着，抢！ 共有951人围观    

web2.0的站点和博客很多都开始启用星级评价，可以达到和读者互动的目的，增加用户体验，这个教程主要是讲解如何使用php+jquery实现ajax星级评价。

demo：http://demo.tutorialzine.com/2009/11/fancy-quotes/demo.php

 点此下载

这个demo实现的功能如下：

  1. 右侧文章列表，随鼠标而滚动。
  2. 点击文章列表中的文章，切换左侧内容。
  3. 鼠标滑过左侧内容出现投票框。
  4. ajax提交评级。
  5. 提交过不允许重复评级。

1、数据库配置

在demo包里面有个tables.sql，导入数据库中。

有二张表：

quotes为文章表

quotes_votes评级表

修改connect.php中的数据库连接配置：

  1. $db_host  = 'localhost';
  2. $db_user  = 'root';
  3. $db_pass  = '123';
  4. $db_database = 'rate';

根据你机子的情况而修改。

如果一切顺利的话，运行demo.php即可正常看到demo了。

2、用到的jquery以及jquery的UI、插件

  1. jquery1.3.2
  2. jquery-ui1.7
  3. ui.stars  星级评价UI插件
  4. jquery.qtip-1.0.0 提示层插件

3、生成文章列表

连接文章表和投票表进行查询：

  1. $result = mysql_query("SELECT q.*, IF(v.id,1,0) AS voted
  2. FROM quotes AS q
  3. LEFT JOIN quotes_votes AS v
  4. ON  q.id = v.qid
  5.  AND v.ip =".$ip."
  6.  AND v.date_submit = '".$today."'
  7. ");

生成投票列表字符串变量$str

  1. while($row=mysql_fetch_assoc($result))
  2. {
  3.  // Looping through all the quotes and generating the list on the right of the page:
  4.  
  5.  $str.= '<div id="q-'.$i.'">'.substr($row['txt'],0,20).
  6.  '<span>...</span><div id="rating-'.$i.'">';
  7.  
  8.  $row['rating'] = round($row['rating']);
  9.  for($z=0;$z<5;$z++)
  10.  {
  11.   $str.='<input type="radio" name="rate-'.$i.'" value="'.($z+1).'" '.($z+1==$row['rating']?'checked="checked"':'').' disabled="disabled" />';
  12.  }
  13.  
  14.  $str.='</div></div>';
  15.  
  16.  // Each quote calls the fillData JS function
  17.  $script.="fillData(".formatJSON($row).");".PHP_EOL;
  18.  
  19.  $i++;
  20. }

这种星级样式是jquery的ui.stars转换的，php只要生成5个单选框即可，单选框的值从1-5，当然要读下数据库中的rating字段的值，然后判定该选中哪个单选框。

留意

  1. $script.="fillData(".formatJSON($row).");".PHP_EOL;

 formatJSON（）这个php函数在function.php中，将结果集转成json。

fillData()是javascript函数，在script.js中，将json数据保存到数组。（这些数据在进行ajax提交评级数据的时候要用到）

4、将单选框转成评级UI

代码在script.js中：

  1. $(".star-rating").stars();

 关于ui.stars的配置请详见我以前写的教程：

http://www.36ria.com/1310

到此如图部分创建结束

5、给列表的文章添加单击事件，切换左侧内容

  1.  $('.thumb').click(function(e){
  2.   /* 点击文章 */
  3.   
  4.   var obj = quotes[parseInt(e.target.id.replace('q-',''))-1];
  5.   /* 获取该文章的在数据库中的数据，这里要把id过滤下，因为层的id有个'q-'前缀 */
  6.  
  7.   $('#quote-content').fadeOut('fast',function(){
  8.    /* 动画隐藏内容层后触发的回调函数 */
  9.  
  10.    if(!obj) return false;
  11.  
  12.    /* 替换标题和作者信息 */
  13.  
  14.    $(this).find('h1').html(obj.txt);
  15.    $(this).find('span').html(obj.author);
  16.    
  17.    /* 改变页面背景颜色 */
  18.    
  19.    if(obj.bgc) $('body').stop().animate({backgroundColor:obj.bgc},'slow');
  20.  
  21.    /* 产生一个自动提示层和用于评级的5个单选框 */
  22.  
  23.    var tmpstr='';
  24.    for(var z=0;z<5;z++)
  25.    {
  26.     tmpstr+='<input type="radio" name="voteQ" value="'+(z+1)+'" ';
  27.  
  28.     if(z+1==obj.rating) tmpstr+='checked=checked ';
  29.     if(parseInt(obj.voted)) tmpstr+='disabled="disabled" ';
  30.     
  31.     tmpstr+='/>';
  32.    }
  33.    
  34.    tmpstr='<div id="voteRating">'+tmpstr+'</div>';
  35.    
  36.    /* 更新提示层的内容 */
  37.    $('#box').qtip("api").updateContent(tmpstr);
  38.             /* 将单选框转成评级UI */
  39.    $('#voteRating').stars({
  40.     cancelShow: false,
  41.     oneVoteOnly: true,
  42.     callback:function(ui, type, value){vote(obj,value);}
  43.    });
  44.  
  45.    Cufon.refresh();
  46.  
  47.    /* 显示内容层 */
  48.    $(this).fadeIn('fast');
  49.   });
  50.  });

加了中文注释，就不再一一解释了，要留意的有二处地方：

 1、

  1. $('#box').qtip("api").updateContent(tmpstr)

 updateContent是$.qtip()的方法用于更新提示层的内容

2、

  1.    $('#voteRating').stars({
  2.     cancelShow: false,
  3.     oneVoteOnly: true,
  4.     callback:function(ui, type, value){vote(obj,value);}
  5.    });

这里的的评级UI多了几个参数：

oneVoteOnly: true，允许投票

callback:function(){}，投票后的回调函数。（ajax提交评级）

6、创建提示层

关于qtip的配置问题，不在这里讨论，有机会会专门发篇教程。

  1.  $('#box').qtip({
  2.   content: {
  3.    text:'This is an active list element',
  4.    title: { text: 'Vote for this quote'},
  5.    prerender:true
  6.   },
  7.   
  8.   show: 'mouseover',
  9.   hide: {
  10.    delay:1000,
  11.    fixed:true,
  12.    when:'mouseout'
  13.   },
  14.   position: {
  15.    corner: {
  16.     target: 'bottomMiddle',
  17.     tooltip: 'topMiddle'
  18.    },
  19.    adjust:{
  20.     y:20
  21.    }
  22.   },
  23.   style: {
  24.    border: {
  25.     width: 2,
  26.     radius: 6
  27.    },
  28.    name:'light',
  29.    tip: 'topMiddle'
  30.   }
  31.  });

7、ajax评级方法vote()

  1.  function vote(ob,value)
  2. {
  3.  /*ajax将投票数据发给vote.php*/
  4.  $.post('vote.php',{qid:ob.id,vote:value},function(data){
  5.   
  6.   if(data=="1")
  7.   {
  8.    /* 更新json数据 */
  9.    ob.voted=1;
  10.    ob.votes=ob.votes+1;
  11.    ob.vsum=ob.vsum+parseInt(value);
  12.    ob.rating = Math.round(ob.vsum/ob.votes);
  13.    
  14.    /* 更新评级UI */
  15.    $('#rating-'+ob.id).stars("select", ob.rating);
  16.    quotes[ob.id-1]=ob;
  17.   }
  18.  });
  19. }

8、保存投票数据vote.php

  1. /* 将用户ip转成长整型 */
  2. $ip = ip2long($_SERVER['REMOTE_ADDR']);
  3.  
  4. /* 将文章id和评级值转成整形 */
  5. $qid = (int)$_POST['qid'];
  6. $v = (int)$_POST['vote'];
  7.  
  8. /* 向数据库插入数据 */
  9. mysql_query(' INSERT INTO quotes_votes (qid,ip,vote,date_submit)
  10.     VALUES ('.$qid.','.$ip.','.$v.',CURDATE())');
  11.  
  12. /* 更新文章表的评级统计数据 */
  13. if(mysql_affected_rows($link)==1)
  14. {
  15.  mysql_query("UPDATE quotes SET votes=votes+1, vsum=vsum+".$v.", rating=vsum/votes WHERE id=".$qid);
  16.  echo'1';
  17. }
  18. else echo '0';

原文：http://tutorialzine.com/2009/11/fancy-quotes/
非常长的一篇教程，我敲了三个小时，有不明白的地方可以给偶留言，谢谢

（如果您喜欢这篇教程，可以通过支付宝打赏我们1元哦，拜谢！）

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)

同类