PHP with jquery Ajax no-flush commit to achieve the likes of the function

This article mainly introduces PHP with jquery Ajax non-refresh submission implementation of the point like function, interested in the friend's reference, I hope to help you.

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 "likes", Pic_ip records the user click like IP data.

CREATE TABLE IF not EXISTS ' pic ' (' id ' int (one) not null auto_increment, ' pic_name ' varchar "not NULL, ' Pic_url ' varcha R () Not NULL, ' love ' int (one) not null default ' 0 ', PRIMARY KEY (' id ')) engine=myisam default Charset=utf8; CREATE TABLE IF not EXISTS ' pic_ip ' (' id ' int (one) not null auto_increment, ' pic_id ' int (one) not null, ' IP ' varchar (+) NO T NULL, PRIMARY KEY (' id ')) engine=myisam DEFAULT Charset=utf8

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.

<?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=" likes "class=" img_on "rel=" <?php echo $pic _id;? > "><?php echo $love;? ></a></p></li><?php}?>

CSS , we'll define the dynamic effect of the mouse slide and leave the Hearts 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-repeat4px-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 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

$ (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 front-end Ajax request, 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 the following:

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 likes value, that is, the total number of users who like the picture, and output that total to the front 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 there is 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 the value  echo $love;} else{  echo "liked it.";}

I uploaded the attachment in database SQL you can directly build the test database UTF8 encoded and then import the SQL file into it. Modify the connection information for the database in the connect.php.

Source file Click here to download this site.

Summarize:

In fact, it is an AJAX request, such as you want to praise a product. The commodity table must have a count field. You send a request to the past to put this field +1

This succeeds and returns a current number. And then you change the page.

function Zan (Goodsid, a) {  $.post ("/goods/zan/" +goodsid, Null,function (ret) {     if (ret.status = = ' OK ')      $ (a) . html (ret.zannum);     else      alert (ret.data);  }, ' json ');}

Summary : The above is the entire content of this article, I hope to be able to help you learn.

Related recommendations:

PHP's OpenSSL encryption Extension usage summary

Implementation of 301 redirect Jump instance based on PHP

Analysis of capturing group and non-capturing group instances in PHP regular