欢迎访问

云南鼎浩信息技术有限公司官方网站,云南网站建设诚信品牌!

鼎浩网络,云南鼎浩信息技术有限公司

鼎浩客服热线

DING HAO COLUMN 鼎浩专栏

鼎浩的一些分享
Sharing from Ding Hao

  • 鼎浩服务
  • 1

jQuery+Ajax+PHP实现“喜欢”评级功能

来源:     2013年07月02日16:02
字号:T|T

有同学问我如何实现一个像美丽说那样的“我喜欢”评级功能,当用户看到自己喜欢的图片或文章时,点击“红心”按钮,系统会自动记录用户的点击,并将总数加1。这样再结合不同的系统,可以将此功能应用到投票或收藏商品中去(如淘宝的收藏商品)。


实现过程

本文基于jQuery,通过PHP与mysql实现了一个评级功能,是一个简单的非常好的ajax应用实例。

用户点击页面中自己喜欢的图片上的红心按钮时,前端页面向后台发送一个ajax请求,后台PHP程序接收请求后,查询IP库中是否已经有该用户的点击记录,如果没有,则将对应的数值+1,同时将该用户IP信息写入IP库,反之则告诉用户已经“喜欢过了”。

数据库设计

先准备两张表,pic表保存的是图片信息,包括图片对应的名称、路径以及图片“喜欢”总数,pic_ip则记录用户点击喜欢后的IP数据。

CREATE TABLE IF NOT EXISTS `pic` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `pic_name` varchar(60) NOT NULL,
  `pic_url` varchar(60) NOT NULL,
  `love` int(11) NOT NULL DEFAULT '0',
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8;

CREATE TABLE IF NOT EXISTS `pic_ip` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `pic_id` int(11) NOT NULL,
  `ip` varchar(40) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8

index.php

在index.php中,我们通过PHP读取pic表中的图片信息并展示出来,结合CSS,提升页面展示效果。


  • CSS中,我们将定义鼠标滑向和离开红心按钮的动态效果,并定位按钮的位置。

    .list{width:760px; margin:20px auto}
    .list li{float:left; width:360px; height:280px; margin:10px; position:relative}
    .list li p{position:absolute; top:0; left:0; width:360px; height:24px; line-height:24px; 
    background:#000; opacity:.8;filter:alpha(opacity=80);}
    .list li p a{padding-left:30px; height:24px; background:url(images/heart.png) no-repeat 
    4px -1px;color:#fff; font-weight:bold; font-size:14px}
    .list li p a:hover{background-position:4px -25px;text-decoration:none}

    jQuery代码

    当用户点击自己喜欢的图片上的红心按钮时,向后台love.php发送ajax请求,请求响应成功后,更新原有的数值。

    $(function(){
    	$("p a").click(function(){
    		var love = $(this);
    		var id = love.attr("rel"); //对应id
    		love.fadeOut(300); //渐隐效果
    		$.ajax({
    			type:"POST",
    			url:"love.php",
    			data:"id="+id,
    			cache:false, //不缓存此页面
    			success:function(data){
    				love.html(data);
    				love.fadeIn(300); //渐显效果
    			}
    		});
    		return false;
    	});
    });

    love.php

    后台love.php接收前端的ajax请求,根据提交的图片id值,查找IP表中是否已有该用户ip的点击记录,如果有则告诉用户已“喜欢过了”,反之,则进行一下操作:

    1、更新图片表中对应的图片love字段值,将数值加1。

    2、将该用户IP信息写入到pic_ip表中,用以防止用户重复点击。

    3、获取更新后的love值,即喜欢该图片的用户总数,并将该总数输出给前端页面。

    include_once("connect.php"); //连接数据库
    
    $ip = get_client_ip(); //获取用户IP
    $id = $_POST['id'];
    if(!isset($id) || empty($id)) exit;
    
    $ip_sql=mysql_query("select ip from pic_ip where pic_id='$id' and ip='$ip'");
    $count=mysql_num_rows($ip_sql);
    if($count==0){ //如果没有记录
    	$sql = "update pic set love=love+1 where id='$id'"; //更新数据
    	mysql_query( $sql);
    	$sql_in = "insert into pic_ip (pic_id,ip) values ('$id','$ip')"; //写入数据
    	mysql_query( $sql_in);
    	$result = mysql_query("select love from pic where id='$id'");
    	$row = mysql_fetch_array($result);
    	$love = $row['love']; //获取love数值
    	echo $love;
    }else{
    	echo "喜欢过了..";
    }
    
    

    demo地址:http://www.helloweba.com/demo/loveit/


    客服中心
    点击进行在线咨询

    QQ咨询 咨询QQ:79929313 咨询QQ:88139574 咨询QQ:122790803

    咨询热线:0871-63399840

    客服热线:0871-63523332

    客服中心 客服中心