This article will introduce to you a jQuery Ajax PHP "Like" rating function implementation code, the user clicks on himself on the page When clicking the red heart button on a favorite picture, the front-end page sends an ajax request to the background. After receiving the request, the background PHP program checks whether there is already a click record of the user in the IP library. If not, the corresponding value is set to 1 and the The user's IP information is written into the IP database, otherwise the user is told that the user has "liked it".
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 to 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.
The code is as follows
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="keywords" content="jquery"> <meta name="description" content=""> <title>jQuery+Ajax+PHP实现"喜欢"评级</title> <link rel="stylesheet" type="text/css" href="../css/main.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("p a").click(function(){ var love = $(this); var id = love.attr("rel"); 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; }); }); </script> <style type="text/css"> .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} </style> </head> <body> <div id="main"> <ul class="list"> <?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']; ?> <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 }?> </ul> </div> </body> </html>
In CSS, we will define the dynamic effect of the mouse sliding towards and away from the red heart button, and position the button.
The code is as follows
.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.
The code is as follows
$(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, 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 love value, that is, the total number of users who like the picture, and output the total to the front-end page.
The code is as follows
<?php $host="localhost"; $db_user="root"; $db_pass=""; $db_name="demo"; $timezone="Asia/Shanghai"; $link=mysql_connect($host,$db_user,$db_pass); mysql_select_db($db_name,$link); mysql_query("SET names UTF8"); ?> <?php include_once("connect.php"); $ip = get_client_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 "喜欢过了.."; } //获取用户真实IP function get_client_ip() { if (getenv("HTTP_CLIENT_IP") && strcasecmp(getenv("HTTP_CLIENT_IP"), "unknown")) $ip = getenv("HTTP_CLIENT_IP"); else if (getenv("HTTP_X_FORWARDED_FOR") && strcasecmp(getenv("HTTP_X_FORWARDED_FOR"), "unknown")) $ip = getenv("HTTP_X_FORWARDED_FOR"); else if (getenv("REMOTE_ADDR") && strcasecmp(getenv("REMOTE_ADDR"), "unknown")) $ip = getenv("REMOTE_ADDR"); else if (isset ($_SERVER['REMOTE_ADDR']) && $_SERVER['REMOTE_ADDR'] && strcasecmp($_SERVER['REMOTE_ADDR'], "unknown")) $ip = $_SERVER['REMOTE_ADDR']; else $ip = "unknown"; return ($ip); } ?>
The get_client_ip() function in the code is used to obtain the user’s real IP.
The above are the key codes for implementing the "like" rating function in PHP. I hope you will study it carefully and gain something from it.