jquery+ajax+php implementation "Like" rating features attached source download _ajax related

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".

SOURCE Download Address: Http://xiazai.jb51.net/201509/yuanma/loveit (jb51.net). rar

Implementation process

This article is based on jquery, through PHP and MySQL to achieve a rating function, is a simple and very good example of AJAX applications.

When the user clicks on the Red button on their favorite picture on the page, front page to the background to send an AJAX request, the background of the PHP program to receive requests, query the IP library has the user's click Record, if not, then the corresponding value of +1, while the user IP information into the IP library, Conversely, it tells the user that he has "liked it".

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 ' V Archar not NULL, 
 PRIMARY KEY (' id ') 

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.

<?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> "alt=" <?php echo $pic _name;? > "><p><a href=" # " 
title=" I Like "class=" img_on "rel=" <?php echo $pic _id;? > "><?php echo $love;? ></a></p></li> 
 

In CSS, we will define the dynamic effect of the mouse sliding and leaving the red 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} 

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.

$ (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.

Include_once ("connect.php"); Connection database 
$ip = GET_CLIENT_IP ();//Get User 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) {//If no record 
 $sql = "Update pic set love=love+1 where id= ' $id";//Update Data 
 mysql_query ($sql); 
 $sql _in = "INSERT into PIC_IP (PIC_ID,IP) VALUES (' $id ', ' $ip ')"; Write Data 
 mysql_query ($sql _in); 
 $result = mysql_query ("Select Love from pic where id= ' $id '"); 
 $row = Mysql_fetch_array ($result); 
 $love = $row [' Love ']; Get Love value 
 echo $love; 
} else{ 
 echo "liked it ..."; 

The above content is the jquery+ajax+php realizes "likes" the function to download the entire content of the source code, hoped everybody likes.