PHP combines jQuery's ajax non-refresh submission to implement the like function-PHP Tutorial-php.cn

PHP combines jQuery's ajax non-refresh submission to implement the like function

墨辰丷

Release： 2023-03-29 20:00:01

Original

1575 people have browsed it

This article mainly introduces the ajax non-refresh submission of php combined with jQuery to realize the like function. Interested friends can refer to it. I hope it will be helpful to everyone.

Database design

First prepare two tables. The pic table stores picture information, including the name, path and total number of "likes" of the picture, and pic_ip. Record the IP data of users after clicking 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 &#39;0&#39;,
 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

Copy after login

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 = mysql_query("select * from pic");
   while($row=mysql_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 }?>

Copy after login

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}

Copy after login

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;
  });
});

Copy after login

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(); //获取用户IP
$id = $_POST[&#39;id&#39;];
if(!isset($id) || empty($id)) exit;
$ip_sql=mysql_query("select ip from pic_ip where pic_id=&#39;$id&#39; and ip=&#39;$ip&#39;");
$count=mysql_num_rows($ip_sql);
if($count==0){ //如果没有记录
  $sql = "update pic set love=love+1 where id=&#39;$id&#39;"; //更新数据
  mysql_query( $sql);
  $sql_in = "insert into pic_ip (pic_id,ip) values (&#39;$id&#39;,&#39;$ip&#39;)"; //写入数据
  mysql_query( $sql_in);
  $result = mysql_query("select love from pic where id=&#39;$id&#39;");
  $row = mysql_fetch_array($result);
  $love = $row[&#39;love&#39;]; //获取赞数值
  echo $love;
}else{
  echo "赞过了..";
}

Copy after login

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 to become

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

Copy after login

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study.

Related recommendations:

PHP openssl encryption extension usage summary

Based on Detailed explanation of php implementation of 301 redirection jump examples

Analysis of capturing groups and non-capturing groups in PHP regular expressions

The above is the detailed content of PHP combines jQuery's ajax non-refresh submission to implement the like function. For more information, please follow other related articles on the PHP Chinese website!