Learn how to achieve like effects with php+jQuery+Ajax

The example in this article describes the method of php jQuery Ajax to achieve the like effect. Share it with everyone for your reference. The details are as follows:

Database Design

First prepare two tables. The pic table saves picture information, including the name corresponding to the picture. The path and the total number of "likes" of the picture, pic_ip records the IP data after the user clicks like.

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

In index.php, we read the image information in the pic table through PHP and display it, combined with CSS, to improve the page display effect .

<?php
	 include_once("connect.php");
	 $sql = mysqli_query($link,"select * from pic");
	 while($row=mysqli_fetch_array($sql)){
		 $pic_id = $row[&#39;id&#39;];
		 $pic_name = $row[&#39;pic_name&#39;];
		 $pic_url = $row[&#39;pic_url&#39;];
		 $love = $row[&#39;love&#39;];
	 ?>
   	<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, we will define the dynamic effect of the mouse sliding towards and away from the red heart button, and position the button.

.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 code

When the user clicks the red heart button on the picture he likes, an ajax request is sent to the background love.php. After the request response is successful, the original Some values ​​

$(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

The background love.php receives the ajax request from the front end, and based on the submitted image id value, checks whether the IP table already contains the If there is a click record of the user's IP, it will tell the user that it has been "liked". Otherwise, perform the following operations:

1. Update the corresponding picture love field value in the picture table and add 1 to the value.
2. Write the user's IP information into the pic_ip table to prevent users from clicking repeatedly.
3. Get the updated like value, that is, the total number of users who like the picture, and output the total to the front-end page.

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 "赞过了..";
}

In the database SQL in the attachment I uploaded, you can directly create the test database UTF8 encoded, and then import the SQL file into it. Just modify the database connection information in connect.php.

Source file click here to download from this site.

Summary:

In fact, it means sending an ajax request, for example, you want to like a product. The product table must have a count field. You send a request to this field 1

. If successful, a current number will be returned. Then change the page and it becomes

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

Related learning recommendations: php programming (video)

The above is the detailed content of Learn how to achieve like effects with php+jQuery+Ajax. For more information, please follow other related articles on the PHP Chinese website!