jquery+ajax+php "like" rating feature implementation code, jqueryajax_php tutorial

Source: Internet
Author: User

jquery+ajax+php "like" rating function implementation code, JQUERYAJAX


This article to introduce a jquery+ajax+php implementation of the "like" rating function code, the user click on the page in their favorite image on the Hearts button, the front page to the background to send an AJAX request, the background PHP program received the request, Query the IP library if there is already a record of the user's click, if not, then the corresponding value of +1, while the user IP information to the IP library, and vice versa tells the user has "liked".

Database design
First prepare two tables, the PIC table holds the picture information, including the image corresponding to the name, path and the total number of pictures "like", Pic_ip records the user click on the IP data.

CREATE TABLE IF not EXISTS ' pic ' (  ' id ' int (one) not null auto_increment,  ' pic_name ' varchar) ' is not NULL  ' pic _url ' varchar ' isn't null, ' Love  ' int (one) not null DEFAULT ' 0 ',  
CREATE TABLE IF not EXISTS ' pic_ip ' (  ' id ' int (one-by-one) not NULL auto_increment,  ' pic_id ' int (one-by-one) not NULL,  ' IP ' VA Rchar (+) not NULL,  

index.php
In index.php, we read the picture information in the PIC table through PHP and display it, combining CSS to enhance the effect of the page display.
The code is as follows

 
  
 
 
  
 
 
  
 <title>jquery+ajax+php achieve "like" rating</title>
 
  
 
 
 
      <?phpinclude_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 '];? >
    • "alt=" <?php echo $pic _name;? > ">

      "><?php Echo $love;? >

    • <?php}?>

CSS, we'll define the dynamic effect of the mouse slide and leave the Hearts button, and position the button.
The code is as follows

jquery Code
When the user clicks on the Heart button on their favorite picture, sends the AJAX request to the background love.php, and after the request responds successfully, updates 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 the AJAX request of the front-end, according to the submitted image ID value, find whether the IP table has a click record of the user's IP, if there is a tell the user has "liked", conversely, then do a bit:
1. Update the value of the image Love field in the Picture table, and add the value 1.
2, the User IP information is written to the Pic_ip table, to prevent users from repeating the click.
3. Get the updated love value, that is, the total number of users who like the picture, and output that total to the front 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");? > <?phpinclude_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_arr Ay ($result); $love = $row [' Love '];echo $love;} Else{echo "loved it.";} Get the user real ipfunction get_client_ip () {if (getenv ("Http_client_ip") && strcasecmp (getenv ("Http_client_ip"), " Unknown ")) $ip = getenv (" Http_client_ip "), ElseIf (getenv (" Http_x_forwarded_for ") && strcasecmp (getenv (" Http_ ") X_forwarded_for ")," UNKNown ")) $ip = getenv (" Http_x_forwarded_for "), ElseIf (getenv (" REMOTE_ADDR ") && strcasecmp (getenv (" REMOTE_ADDR ") ")," Unknown ")) $ip = getenv (" REMOTE_ADDR ") ElseIf (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 user's real IP.

The above is about the PHP implementation of the "like" rating function of the various key code, I hope you study carefully, from which some gains.

http://www.bkjia.com/PHPjc/1058143.html www.bkjia.com true http://www.bkjia.com/PHPjc/1058143.html techarticle jquery+ajax+php "like" rating function implementation code, JQUERYAJAX this article to introduce to you a jquery+ajax+php implementation "like" rating function code, the user click on the page of their own hi ...

  • Related Article

    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.