jquery+ajax+php "like" rating function to implement code _php instance

Source: Internet
Author: User

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

<! DOCTYPE html>  

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.