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 相关文章推荐
PHP字符编码问题之GB2312 VS UTF-8解决方法
Jun 23 PHP
php 的加密函数 md5,crypt,base64_encode 等使用介绍
Apr 09 PHP
深入for,while,foreach遍历时间比较的详解
Jun 08 PHP
php根据某字段对多维数组进行排序的方法
Mar 07 PHP
php开发中的页面跳转方法总结
Apr 26 PHP
Laravel框架实现发送短信验证功能代码
Jun 06 PHP
详谈PHP中的密码安全性Password Hashing
Feb 04 PHP
PHP输出Excel PHPExcel的方法
Jul 26 PHP
PHP实现无限极分类的两种方式示例【递归和引用方式】
Mar 25 PHP
docker-compose部署php项目实例详解
Jul 30 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
Sep 12 PHP
tp5框架基于ajax实现异步删除图片的方法示例
Feb 10 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
跟我学小偷程序之成功偷取首页(第三天)
2006/10/09 PHP
php判断是否为json格式的方法
2014/03/04 PHP
php实现过滤字符串中的中文和数字实例
2015/07/29 PHP
Laravel最佳分割路由文件(routes.php)的方式
2016/08/04 PHP
PHP连接MySQL数据库的三种方式实例分析【mysql、mysqli、pdo】
2019/11/04 PHP
用js实现的抽象CSS圆角效果!!
2007/05/03 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
2012/03/26 Javascript
js加密解密字符串可自定义密码因子
2014/05/13 Javascript
原生js事件的添加和删除的封装
2014/07/01 Javascript
纯js实现无限空间大小的本地存储
2015/06/18 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
2016/03/01 Javascript
JS添加删除DIV的简单实例
2016/07/08 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
2017/02/17 Javascript
ReactNative中使用Redux架构总结
2017/12/15 Javascript
说说Vue.js中的functional函数化组件的使用
2019/02/12 Javascript
Node.js使用supervisor进行开发中调试的方法
2019/03/26 Javascript
vuex的使用和简易实现
2021/01/07 Vue.js
Python实现模拟分割大文件及多线程处理的方法
2017/10/10 Python
matplotlib savefig 保存图片大小的实例
2018/05/24 Python
Python判断telnet通不通的实例
2019/01/26 Python
python 实现读取csv数据,分类求和 再写进 csv
2020/05/18 Python
python爬虫泛滥的解决方法详解
2020/11/25 Python
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
Currentbody美国/加拿大:美容仪专家
2020/03/09 全球购物
经典c++面试题二
2015/08/14 面试题
软件设计的目标是什么
2016/12/04 面试题
大学学生会竞选演讲稿
2014/04/25 职场文书
学校食品安全实施方案
2014/06/14 职场文书
学雷锋志愿者活动总结
2014/06/27 职场文书
思想政治表现评语
2015/01/04 职场文书
搭讪开场白台词大全
2015/05/28 职场文书
鲁滨逊漂流记读书笔记
2015/06/26 职场文书
入党申请书怎么写?
2019/06/21 职场文书
导游词之广东佛山(南风古灶)
2019/09/24 职场文书
css3应用示例:新增的选择器
2022/03/16 HTML / CSS
vue 把二维或多维数组转一维数组
2022/04/24 Vue.js