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 Directory 函数的详解
Mar 07 PHP
php 模拟get_headers函数的代码示例
Apr 27 PHP
zend Framework中的Layout(模块化得布局)详解
Jun 28 PHP
php中文繁体和简体相互转换的方法
Mar 21 PHP
PHP curl使用实例
Jul 02 PHP
微信随机生成红包金额算法php版
Jul 21 PHP
Yii核心验证器api详解
Nov 23 PHP
phpstudy默认不支持64位php的解决方法
Feb 20 PHP
PHP模型Model类封装数据库操作示例
Mar 14 PHP
PHP设计模式(四)原型模式Prototype实例详解【创建型】
May 02 PHP
PHP函数用法详解【初始化、嵌套、内置函数等】
Jun 02 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
PHP中的traits实现代码复用使用实例
2015/05/13 PHP
PHP的Yii框架中行为的定义与绑定方法讲解
2016/03/18 PHP
PHP+ajax实现获取新闻数据简单示例
2018/05/08 PHP
javascript据option的value值快速设定初始的selected选项
2007/08/13 Javascript
DOM 脚本编程中的兄弟节点
2009/10/31 Javascript
js判断变量是否未定义的代码
2020/03/28 Javascript
Knockout text绑定DOM的使用方法
2013/11/15 Javascript
JSON中双引号的轮回使用过程中一定要小心
2014/03/05 Javascript
JS计算网页停留时间代码
2014/04/28 Javascript
Node.js 的异步 IO 性能探讨
2014/10/08 Javascript
轻松学习Javascript闭包
2017/03/01 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
2017/03/09 Javascript
Vue通过input筛选数据
2020/10/26 Javascript
JavaScript箭头函数_动力节点Java学院整理
2017/06/28 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
2017/10/27 Javascript
vue.js+element-ui动态配置菜单的实例
2018/09/07 Javascript
JS 实现微信扫一扫功能
2018/09/14 Javascript
vsCode安装使用教程和插件安装方法
2020/08/24 Javascript
JS算法题之查找数字在数组中的索引位置
2019/05/15 Javascript
python实现ftp客户端示例分享
2014/02/17 Python
Python用UUID库生成唯一ID的方法示例
2016/12/15 Python
python 生成任意形状的凸包图代码
2020/04/16 Python
python判断是空的实例分享
2020/07/06 Python
python中逻辑与或(and、or)和按位与或异或(&amp;、|、^)区别
2020/08/05 Python
python编写实现抽奖器
2020/09/10 Python
联想阿根廷官方网站:Lenovo Argentina
2019/10/14 全球购物
介绍一下ICMP(Internet Control Message Protocol)Internet控制信息协议
2016/11/26 面试题
销售工作人员的自我评价分享
2013/11/10 职场文书
六月份红领巾广播稿
2014/02/03 职场文书
学习张丽丽心得体会
2014/09/03 职场文书
连锁超市项目计划书
2014/09/15 职场文书
工程部岗位职责范本
2015/04/11 职场文书
2015年卫生局工作总结
2015/07/24 职场文书
面试中老生常谈的MySQL问答集锦夯实基础
2022/03/13 MySQL
MybatisPlus EntityWrapper如何自定义SQL
2022/03/22 Java/Android