php+jQuery+Ajax实现点赞效果的方法(附源码下载)


Posted in PHP onJuly 21, 2020

本文实例讲述了php+jQuery+Ajax实现点赞效果的方法。分享给大家供大家参考,具体如下:

数据库设计

先准备两张表,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,提升页面展示效果。

<?php
	 include_once("connect.php");
	 $sql = mysqli_query($link,"select * from pic");
	 while($row=mysqli_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 }?>

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、获取更新后的赞值,即赞该图片的用户总数,并将该总数输出给前端页面。

include_once("connect.php");

$ip = get_client_ip();
$id = $_POST['id'];
if(!isset($id) || empty($id)) exit;

$ip_sql=mysqli_query($link,"select ip from pic_ip where pic_id='$id' and ip='$ip'");
$count=mysqli_num_rows($ip_sql);
if($count==0){
	$sql = "update pic set love=love+1 where id='$id'";
	mysqli_query($link,$sql);
	$sql_in = "insert into pic_ip (pic_id,ip) values ('$id','$ip')";
	mysqli_query($link,$sql_in);
	$result = mysqli_query($link,"select love from pic where id='$id'");
	$row = mysqli_fetch_array($result);
	$love = $row['love'];
	echo $love;
}else{
	echo "赞过了..";
}

我上传的附件中 数据库SQL 你可以直接建立test 数据库UTF8编码的,然后把SQL文件导入进去。修改一下connect.php中数据库的连接信息即可。

源文件点击此处本站下载。

总结:

其实就是发了一个ajax请求,比如你要赞一个商品。商品表肯定有一个计数的字段。你发一个请求过去把这个字段+1

该成功了就返回一个现在的数。然后把页面改一下就成了

function Zan( goodsId, a ){
 $.post( "/goods/zan/"+goodsId, null,function( ret ){
   if( ret.status == 'ok' )
   $(a).html( ret.zannum);
   else
   alert( ret.data );
 },'json' );
}

希望本文所述对大家php程序设计有所帮助。

备注:三水点靠木改写了mysqli函数处理数据库操作,以方便兼容PHP7开发环境

到此这篇关于php+jQuery+Ajax实现点赞效果的方法(附源码下载)的文章就介绍到这了,更多相关php+jQuery+Ajax点赞效果内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

PHP 相关文章推荐
使用sockets:从新闻组中获取文章(三)
Oct 09 PHP
php date()日期时间函数详解
May 16 PHP
PHP的SQL注入实现(测试代码安全不错)
Feb 27 PHP
PHPUnit PHP测试框架安装方法
Mar 23 PHP
JS中encodeURIComponent函数用php解码的代码
Mar 01 PHP
php+js iframe实现上传头像界面无跳转
Apr 29 PHP
PHP中cookie和session的区别实例分析
Aug 28 PHP
php实现的Cookies操作类实例
Sep 24 PHP
基于php判断客户端类型
Oct 14 PHP
让ThinkPHP的模板引擎达到最佳效率的方法详解
Mar 14 PHP
PHP连接MySQL数据库并以json格式输出
May 21 PHP
Laravel框架生命周期与原理分析
Jun 12 PHP
WordPress中限制非管理员用户在文章后只能评论一次
Dec 31 #PHP
php实现微信公众号主动推送消息
Dec 31 #PHP
php创建桌面快捷方式实现方法
Dec 31 #PHP
开启PHP的伪静态模式
Dec 31 #PHP
thinkphp多层MVC用法分析
Dec 30 #PHP
thinkphp命名空间用法实例详解
Dec 30 #PHP
详解PHP中的null合并运算符
Dec 30 #PHP
You might like
PHP编码规范的深入探讨
2013/06/06 PHP
destoon安全设置中需要设置可写权限的目录及文件
2014/06/21 PHP
PHP面向对象中new self()与 new static()的区别浅析
2017/08/17 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
PHP通过GD库实现验证码功能示例
2019/02/23 PHP
关于jQuery的inArray 方法介绍
2011/10/08 Javascript
JSON 数字排序多字段排序介绍
2013/09/18 Javascript
使用原生js写的一个简单slider
2014/04/29 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
2015/06/01 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
2015/12/10 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
2016/02/18 Javascript
Bootstrap表单Form全面解析
2016/06/13 Javascript
NODE.JS跨域问题的完美解决方案
2016/10/20 Javascript
基于Vuejs框架实现翻页组件
2020/06/29 Javascript
jQuery实现二维码扫描功能
2017/01/09 Javascript
Javascript自定义事件详解
2017/01/13 Javascript
设置cookie指定时间失效(实例代码)
2017/05/28 Javascript
JS实现按钮控制计时开始和停止功能
2017/07/27 Javascript
浅析vue深复制
2018/01/29 Javascript
Webpack 4.x搭建react开发环境的方法步骤
2018/08/15 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
2018/09/25 Javascript
vue下载excel的实现代码后台用post方法
2019/05/10 Javascript
TypeScript类型声明书写详解
2019/08/28 Javascript
javascript实现点击星星小游戏
2019/12/24 Javascript
Python实现随机生成手机号及正则验证手机号的方法
2018/04/25 Python
深入浅析python 协程与go协程的区别
2019/05/09 Python
python或C++读取指定文件夹下的所有图片
2019/08/31 Python
Python实现把类当做字典来访问
2019/12/16 Python
Django 解决model 反向引用中的related_name问题
2020/05/19 Python
python中pdb模块实例用法
2021/01/15 Python
shallow copy和deep copy的区别
2016/05/09 面试题
明星邀请函
2015/02/02 职场文书
大学生党课感想
2015/08/11 职场文书
HTML页面滚动时部分内容位置固定不滚动的实现
2021/04/14 HTML / CSS
mysql 8.0.24版本安装配置方法图文教程
2021/05/12 MySQL
PHP正则表达式之RCEService回溯
2022/04/11 PHP