php jQuery Ajax method to achieve like effect (with source code download), jqueryajax_PHP tutorial

php jQuery Ajax method to achieve the like effect (with source code download), jqueryajax

This article describes the example of php jQuery Ajax method 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, path and total number of "likes" of the picture corresponding to 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.

<&#63;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'];
   &#63;>
   <li><img src="images/<&#63;php echo $pic_url;&#63;>" alt="<&#63;php echo $pic_name;&#63;>"><p><a href="#"
title="赞"class="img_on" rel="<&#63;php echo $pic_id;&#63;>"><&#63;php echo $love;&#63;></a></p></li>
<&#63;php }&#63;>

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 value is updated

$(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, it searches the IP table to see if there is a click record of the user's IP. If so, it tells the user that it has "liked it". Otherwise, proceed. Just do this:

1. Update the corresponding image love field value in the image 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(); //获取用户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 "赞过了..";
}

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

Click here to download the source file.

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 and put this field 1

If successful, return the current number. 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' );
}

I hope this article will be helpful to everyone in php programming design.

Articles you may be interested in:

• php xml combined with Ajax to achieve a complete example of the like function
• php mysql combined with Ajax to achieve a complete example of the like function
• Method of jQuery ajax to implement article like function
• Example analysis of super simple like effect implemented by jQuery
• JQuery implemented like 1 animation effect for pictures (with online demonstration and demo source code download )
• jQuery realizes the random number display animation effect of likes (with online demonstration and demo source code download)
• jQuery simply implements QQ space likes and has canceled likes