0

0

学习php+jQuery+Ajax实现点赞效果的方法

coldplay.xixi

coldplay.xixi

发布时间:2020-08-10 17:30:31

|

2836人浏览过

|

来源于jb51

转载

学习php+jQuery+Ajax实现点赞效果的方法

本文实例讲述了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

立即学习PHP免费学习笔记(深入)”;

在index.php中,我们通过PHP读取pic表中的图片信息并展示出来,结合CSS,提升页面展示效果。


   	
  • @@##@@" alt="">

  • 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请求,请求响应成功后,更新原有的数值

    PHP、MySQL和Apache的学习
    PHP、MySQL和Apache的学习

    PHP是程式语言、MySQL是资料库,要学好任何一种都不是件容易的事,而我们,还要将它做出成果出来!很难吗?不会的!有好的方法、好的流程,其实是可以很轻松的学会,并且应用在网页上的。 书里所介绍的是观念、流程,一个步骤一个步骤依照需求,就可以做出我们要的结果,不怕做不出来,希望藉由这本书,可以让你将这些观念实现在你的网站里。 PHP & MySQL的学习,只要有正确的观念、正确

    下载
    $(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编程(视频)
    学习php+jQuery+Ajax实现点赞效果的方法

    相关文章

    PHP速学教程(入门到精通)
    PHP速学教程(入门到精通)

    PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

    下载

    相关标签:

    本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

    相关专题

    更多
    苹果官网入口直接访问
    苹果官网入口直接访问

    苹果官网直接访问入口是https://www.apple.com/cn/,该页面具备0.8秒首屏渲染、HTTP/3与Brotli加速、WebP+AVIF双格式图片、免登录浏览全参数等特性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

    115

    2025.12.24

    拼豆图纸在线生成器
    拼豆图纸在线生成器

    拼豆图纸生成器有PixelBeads在线版、BeadGen和“豆图快转”;推荐通过pixelbeads.online或搜索“beadgen free online”直达官网,避开需注册的诱导页面。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

    82

    2025.12.24

    俄罗斯搜索引擎yandex官方入口地址(最新版)
    俄罗斯搜索引擎yandex官方入口地址(最新版)

    Yandex官方入口网址是https://yandex.com。用户可通过网页端直连或移动端浏览器直接访问,无需登录即可使用搜索、图片、新闻、地图等全部基础功能,并支持多语种检索与静态资源精准筛选。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

    546

    2025.12.24

    JavaScript ES6新特性
    JavaScript ES6新特性

    ES6是JavaScript的根本性升级,引入let/const实现块级作用域、箭头函数解决this绑定问题、解构赋值与模板字符串简化数据处理、对象简写与模块化提升代码可读性与组织性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

    150

    2025.12.24

    php框架基础知识汇总
    php框架基础知识汇总

    php框架是构建web应用程序的架构,提供工具和功能,以简化开发过程。选择合适的框架取决于项目需求和技能水平。实战案例展示了使用laravel构建博客的步骤,包括安装、创建模型、定义路由、编写控制器和呈现视图。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

    20

    2025.12.24

    Word 字间距调整方法汇总
    Word 字间距调整方法汇总

    本专题整合了Word字间距调整方法,阅读下面的文章了解更详细操作。

    47

    2025.12.24

    任务管理器教程
    任务管理器教程

    本专题整合了任务管理器相关教程,阅读下面的文章了解更多详细操作。

    7

    2025.12.24

    AppleID格式
    AppleID格式

    本专题整合了AppleID相关内容,阅读专题下面的文章了解更多详细教程。

    12

    2025.12.24

    csgo视频观看入口合集
    csgo视频观看入口合集

    本专题整合了csgo观看入口合集,阅读下面的文章了知道更多入口地址。

    371

    2025.12.24

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    PHP课程
    PHP课程

    共137课时 | 7.8万人学习

    JavaScript ES5基础线上课程教学
    JavaScript ES5基础线上课程教学

    共6课时 | 6.9万人学习

    PHP新手语法线上课程教学
    PHP新手语法线上课程教学

    共13课时 | 0.8万人学习

    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号