ajax点赞代码（js点赞代码）

今天给各位分享ajax点赞代码的知识，其中也会对js点赞代码进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、红心点赞按钮怎么做
• 2、Php点赞效果的制作代码+解析
• 3、asp.net，c#如何实现点赞功能？

红心点赞按钮怎么做

需要学习JavaScript语言和HTML语言

使用方法

HTML结构

该“点赞”红心按钮的HTML结构是将心形按钮放在一个超链接的后面或下面，它的HTML结果如下：

div class="feed" id="feed1"

pjQuery之家 a href="";/a/p

div class="heart" id="like3" rel="like"/div

div class="likeCount" id="likeCount3"24/div

/div

CSS样式

整个“点赞”烟花爆炸效果实际上是使用背景图片的连续播放来完成的，它使用一张很长的雪碧（Sprite）图片,然后在点击红心按钮是逐帧进行播放。下面是开始时显示第一帧的CSS样式：

.heart {

background: url(images/web_heart_animation.png);

background-position: left;

background-repeat: no-repeat;

height: 50px;

width: 50px;

cursor: pointer;

position: absolute;

left:-14px;

background-size:1450px; //实际背景图片尺寸2900px

}

.heart:hover{

background-position: right; //显示最后一个红心帧

}

.likeCount{

margin-top: 13px;

margin-left: 28px;

font-size: 16px;

color: #999999

}

下面的代码是逐帧播放红心背景图片，它使用CSS3 keyframe帧动画来完成。

@-webkit-keyframes heartBlast {

0% {background-position: left;}

100% {background-position: right;}

}

@keyframes heartBlast {

0% {background-position: left;}

100% {background-position: right;}

}

.heartAnimation {

-webkit-animation-name: heartBlast; //webkit内核浏览器

animation-name: heartBlast;

-webkit-animation-duration: .8s;

animation-duration: .8s;

-webkit-animation-iteration-count: 1;

animation-iteration-count: 1;

-webkit-animation-timing-function: steps(28); //共28个背景图片帧

animation-timing-function: steps(28);

background-position: right;

}

JavaScript

在这个“点赞”红心动画特效中使用jQuery代码来使红心按钮在点击时与相应的总点赞数量进行联动。你可以通过ajax来进行数据库操作。当用户点赞时，总数量加1，取消点赞时，总数量减1。

script

$(document).ready(function(){

$('body').on("click",'.heart',function(){

var A=$(this).attr("id");

var B=A.split("like"); //splitting like1 to 1

var messageID=B[1];

$(this).css("background-position","")

var D=$(this).attr("rel");

$.ajax({

type: "POST",

url: "message_like_ajax.php",

data: dataString,

cache: false,

success: function(data){

$("#likeCount"+messageID).html(data);

if(D === 'like') {

$(this).addClass("heartAnimation").attr("rel","unlike"); //applying animation class

}

else{

$(this).removeClass("heartAnimation").attr("rel","like");

$(this).css("background-position","left");

}

}); //ajax end

});//heart click end

});

/script

Php点赞效果的制作代码+解析

数据库设计

先准备两张表，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 = 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']; 

     ? 

     liimg src="images/?php echo $pic_url;?" alt="?php echo $pic_name;?"pa 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(); //获取用户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 "赞过了.."; 

}

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

asp.net，c#如何实现点赞功能？

1、点赞按钮，使用ajax操作

2、在ajax中使用cookie记录IP和用户，给出限制点击时间间隔，用来限制用户连续点击

3、同事在ajax中，点击后就修改数据库赞数，并记录用户ID

ajax点赞代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于js点赞代码、ajax点赞代码的信息别忘了在本站进行查找喔。