找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 113|回复: 0
打印 上一主题 下一主题

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

[复制链接]

2487

主题

2487

帖子

7391

积分

论坛元老

Rank: 8Rank: 8

积分
7391
跳转到指定楼层
楼主
发表于 2018-2-14 05:42:27 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

            本文章来给大家介绍一个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,提升页面展示效果。
代码如下
jQuery+Ajax+PHP实现"喜欢"评级
.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}



  • ">">


    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:"OST",
          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值,即喜欢该图片的用户总数,并将该总数输出给前端页面。
    代码如下


    代码中get_client_ip()函数是用来获取用户的真实IP。
    以上就是关于php 实现“喜欢”评级功能的各个关键代码,希望大家仔细研究,从中有所收获。
                
                
    您可能感兴趣的文章:
  • jQuery+PHP+ajax实现微博加载更多内容列表功能
  • jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
  • PHP+jquery+ajax实现即时聊天功能实例
  • PHP+jQuery+Ajax实现多图片上传效果
  • PHP+jQuery+Ajax实现用户登录与退出
  • PHP+jQuery+Ajax+Mysql如何实现发表心情功能
  • jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
  • jquery与php结合实现AJAX长轮询(LongPoll)
  • jQuery+Ajax+PHP实现“喜欢”评级功能附源码下载
  • jQuery通过Ajax向PHP服务端发送请求并返回JSON数据
  • php+jQuery+Ajax实现点赞效果的方法(附源码下载)
  • PHP结合Jquery和ajax实现瀑布流特效
  • php基于jquery的ajax技术传递json数据简单实例
            
  • 分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
    收藏收藏
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    用户反馈
    客户端