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


Posted in PHP onOctober 08, 2015

本文章来给大家介绍一个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(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}
</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['id'];
$pic_name = $row['pic_name'];
$pic_url = $row['pic_url'];
$love = $row['love'];
?>
<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(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值,即喜欢该图片的用户总数,并将该总数输出给前端页面。
代码如下 

<?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['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'];
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['REMOTE_ADDR']) && $_SERVER['REMOTE_ADDR'] && strcasecmp($_SERVER['REMOTE_ADDR'], "unknown"))
$ip = $_SERVER['REMOTE_ADDR'];
else
$ip = "unknown";
return ($ip);
}
?>

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

以上就是关于php 实现“喜欢”评级功能的各个关键代码,希望大家仔细研究,从中有所收获。

PHP 相关文章推荐
Windows IIS PHP 5.2 安装与配置方法
Jun 08 PHP
php Sql Server连接失败问题及解决办法
Aug 07 PHP
PHPCMS的使用小结
Sep 20 PHP
PHP 万年历实现代码
Oct 18 PHP
解析如何去掉CodeIgniter URL中的index.php
Jun 25 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十三)
Jun 26 PHP
php字符串过滤与替换小结
Jan 26 PHP
PHP输出两个数字中间有多少个回文数的方法
Mar 23 PHP
7个鲜为人知却非常实用的PHP函数
Jul 01 PHP
php处理抢购类功能的高并发请求
Feb 08 PHP
PHP PDOStatement::bindParam讲解
Jan 30 PHP
在Laravel 的 Blade 模版中实现定义变量
Oct 14 PHP
常见的四种POST 提交数据方式(小总结)
Oct 08 #PHP
PHP抽奖算法程序代码分享
Oct 08 #PHP
php视频拍照上传头像功能实现代码分享
Oct 08 #PHP
php+ajax 实现输入读取数据库显示匹配信息
Oct 08 #PHP
解决php的“It is not safe to rely on the system’s timezone settings”问题
Oct 08 #PHP
php 问卷调查结果统计
Oct 08 #PHP
JSON用法之将PHP数组转JS数组,JS如何接收PHP数组
Oct 08 #PHP
You might like
《神奇女侠:血脉》神力女超人大战犯罪公司
2020/04/09 欧美动漫
用PHP的ob_start() 控制您的浏览器cache
2009/08/03 PHP
php实现简易聊天室应用代码
2015/09/23 PHP
PHP通过反射动态加载第三方类和获得类源码的实例
2015/11/27 PHP
PHP-FPM运行状态的实时查看及监控详解
2016/11/18 PHP
Yii框架数据模型的验证规则rules()被执行的方法
2016/12/02 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
ExtJS 2.0实用简明教程 之ExtJS版的Hello
2009/04/29 Javascript
如何将JS的变量值传递给ASP变量
2012/12/10 Javascript
jquery实现弹出窗口效果的实例代码
2013/11/28 Javascript
使用script的src实现跨域和类似ajax效果
2014/11/10 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
2015/08/11 Javascript
JS实现弹出居中的模式窗口示例
2016/06/20 Javascript
artDialog+plupload实现多文件上传
2016/07/19 Javascript
学好js,这些js函数概念一定要知道【推荐】
2017/01/19 Javascript
xmlplus组件设计系列之列表(4)
2017/04/26 Javascript
bootstrap轮播图示例代码分享
2017/05/17 Javascript
详解vue-router2.0动态路由获取参数
2017/06/14 Javascript
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
es6 symbol的实现方法示例
2019/04/02 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
2019/04/17 Javascript
JS中async/await实现异步调用的方法
2019/08/28 Javascript
vue resource发送请求的几种方式
2019/09/30 Javascript
Map与WeakMap类型在JavaScript中的使用详解
2020/11/18 Javascript
Python使用OpenCV进行标定
2018/05/08 Python
python用BeautifulSoup库简单爬虫实例分析
2018/07/30 Python
Python字典创建 遍历 添加等实用基础操作技巧
2018/09/13 Python
Python逐行读取文件内容的方法总结
2020/02/14 Python
基于python生成英文版词云图代码实例
2020/05/16 Python
python中用ctypes模拟点击的实例讲解
2020/11/26 Python
CSS3实现3D翻书效果
2016/06/20 HTML / CSS
商场中秋节广播稿
2014/01/17 职场文书
《桃林那间小木屋》教学反思
2014/05/01 职场文书
民主评议党员总结
2014/10/20 职场文书
超搞笑婚前保证书
2015/05/08 职场文书
优秀教师主要事迹材料
2015/11/04 职场文书