suchen

Heim  >  Artikel  >  php教程  >  jQuery+Ajax+PHP实现“喜欢”评级功能代码

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

WBOY
WBOYOriginal
2016-05-25 16:39:491107Durchsuche

本文章来给大家介绍一个jQuery+Ajax+PHP实现"喜欢"评级功能代码,用户点击页面中自己喜欢的图片上的红心按钮时，前端页面向后台发送一个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，提升页面展示效果,代码如下:

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="keywords" content="jquery"> 
<meta name="description" content=""> 
<title>jQuery+Ajax+PHP实现"喜欢"评级</title> 
<link rel="stylesheet" type="text/css" href="../css/main.css" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function () {
    $("p a").click(function () {
        var love = $(this);
        var id = love.attr("rel");
        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;
    });
});
</script> 
<style type="text/css"> 
.clear{clear:both} 
.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(http://pic1.phprm.com/2014/08/27/heart.jpg) no-repeat 4px -1px;color:#fff; font-weight:bold; font-size:14px} 
.list li p a:hover{background-position:4px -25px;text-decoration:none} 
</style> 
</head> 
 
<body> 
 
<div id="main"> 
 
<ul class="list"> 
<?php 
include_once("connect.php"); 
$sql = mysql_query("select * from pic"); 
while($row=mysql_fetch_array($sql)){ 
$pic_id = $row[&#39;id&#39;]; 
$pic_name = $row[&#39;pic_name&#39;]; 
$pic_url = $row[&#39;pic_url&#39;]; 
$love = $row[&#39;love&#39;]; 
 
<li><img src="images/<?php echo $pic_url;" alt="<?php echo $pic_name;"><p><a href="#" title="我喜欢" class="img_on" rel="<?php echo $pic_id;"><?php echo $love;</a></p></li> 
<?php } 
</ul> 
</div> 
 
</body> 
</html>

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(http://pic1.phprm.com/2014/08/27/heart.jpg) 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值,即喜欢该图片的用户总数,并将该总数输出给前端页面,代码如下:

<?php 
$host="localhost"; 
$db_user="root"; 
$db_pass=""; 
$db_name="demo"; 
$timezone="Asia/Shanghai"; 
 
$link=mysql_connect($host,$db_user,$db_pass); 
mysql_select_db($db_name,$link); 
mysql_query("SET names UTF8"); 
?>
<?php 
include_once("connect.php"); 
$ip = get_client_ip(); 
$id = $_POST[&#39;id&#39;]; 
if(!isset($id) || emptyempty($id)) exit; 
 
$ip_sql=mysql_query("select ip from pic_ip where pic_id=&#39;$id&#39; and ip=&#39;$ip&#39;"); 
$count=mysql_num_rows($ip_sql); 
if($count==0){ 
$sql = "update pic set love=love+1 where id=&#39;$id&#39;"; 
mysql_query( $sql); 
$sql_in = "insert into pic_ip (pic_id,ip) values (&#39;$id&#39;,&#39;$ip&#39;)"; 
mysql_query( $sql_in); 
$result = mysql_query("select love from pic where id=&#39;$id&#39;"); 
$row = mysql_fetch_array($result); 
$love = $row[&#39;love&#39;]; 
echo $love; 
}else{ 
echo "喜欢过了.."; 
} 
//获取用户真实IP 
function get_client_ip() { 
if (getenv("HTTP_CLIENT_IP") && strcasecmp(getenv("HTTP_CLIENT_IP"), "unknown")) 
$ip = getenv("HTTP_CLIENT_IP"); 
else 
if (getenv("HTTP_X_FORWARDED_FOR") && strcasecmp(getenv("HTTP_X_FORWARDED_FOR"), "unknown")) 
$ip = getenv("HTTP_X_FORWARDED_FOR"); 
else 
if (getenv("REMOTE_ADDR") && strcasecmp(getenv("REMOTE_ADDR"), "unknown")) 
$ip = getenv("REMOTE_ADDR"); 
else 
if (isset ($_SERVER[&#39;REMOTE_ADDR&#39;]) && $_SERVER[&#39;REMOTE_ADDR&#39;] && strcasecmp($_SERVER[&#39;REMOTE_ADDR&#39;], "unknown")) 
$ip = $_SERVER[&#39;REMOTE_ADDR&#39;]; 
else 
$ip = "unknown"; 
return ($ip); 
} 
?>

代码中get_client_ip()函数是用来获取用户的真实IP.


本文链接:

收藏随意^^请保留教程地址.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：PHP生成带LOGO的二维码图像 Nächster Artikel：php上传Excel文件时如何判断文件中有图片

In Verbindung stehende Artikel

Mehr sehen