This article to introduce a jquery+ajax+php implementation of "like" rating function code, the user clicks on the page of their favorite picture on the red button, the front-end page to the background to send an AJAX request, the background of the PHP program to receive requests, Query the IP library whether the user has a hit record, if not, the corresponding value of +1, while the user IP information to write to the IP library, the other is to tell the user has been "like".
Database design
first prepare two tables, the PIC table holds the picture information, including the corresponding name of the picture, the path and the picture "like" The total, pic_ip is the user clicks on the IP data.
CREATE TABLE IF not EXISTS ' pic ' (
' id ' int (one) not null auto_increment,
' pic_name ' varchar () not NULL,
' pic _url ' varchar NOT null,
' love ' int (one) not null DEFAULT ' 0 ',
PRIMARY KEY (' id ')
engine=myisam DEFAULT CH Arset=utf8;
CREATE TABLE IF not EXISTS ' pic_ip ' (
' id ' int (one) not null auto_increment,
' pic_id ' int (one) not NULL,
' IP ' varchar () not NULL,
PRIMARY KEY (' id ')
) Engine=myisam DEFAULT Charset=utf8
index.php
in index.php, we read the PIC table in PHP through the picture information and display, combined with CSS, enhance the page display effect.
The code is as follows
In CSS, we will define the dynamic effect of the mouse sliding and leaving the red 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 on his favorite picture of the red button, to the background love.php send Ajax request, the request response success, update the original value.
The code is as follows
$ (function () {
$ ("p a"). Click (function () {
var love = $ (this);
var id = love.attr ("rel"); Corresponding ID
love.fadeout (300);//Fade effect
$.ajax ({
type: "POST",
URL: "love.php",
data: "id=" +id,
Cache:false,//Do not cache this page
success:function (data) {
love.html (data);
Love.fadein (300); Fade effect
}
});
return false;
});
love.php
Background love.php receive front-end AJAX requests, according to the submitted picture ID value, to find out whether the IP table has the user's IP click Record, if there is to tell the user has been "like", on the contrary, the operation:
1, update the picture table in the corresponding Picture Love Field value, add a value of 1.
2, the User IP information written to the PIC_IP table, to prevent users to repeat the click.
3, get the updated love value, that is, the total number of users like the picture, and the total output 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 "liked it.";}//Get user real 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 get the real IP of the user.
The above is about the implementation of PHP "like" rating function of the key code, I hope that we carefully study, from which some harvest.