Php+jquery+ajax How to achieve the effect of liking (with source download), jqueryajax_php tutorial

Php+jquery+ajax How to achieve the effect of praise (with source download), Jqueryajax

The example of this paper describes how to achieve the effect of liking php+jquery+ajax. Share to everyone for your reference, as follows:

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 '];   ? >   
"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.

. 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 ');}

I hope this article is helpful to you in PHP programming.

Articles you may be interested in:

• Php+xml combined with Ajax to implement a full example of the likes feature
• Php+mysql combined with Ajax to implement a full example of the likes feature
• Jquery+ajax the way to realize the article likes the function
• An example analysis of the ultra-simple effect of jquery implementation
• jquery implementation of the picture to the image + 1 animation effect (with online demo and demo source download)
• jquery-like random digital display animation effect (with online demo and demo source download)
• jquery simple implementation of the QQ space likes has been canceled like

http://www.bkjia.com/PHPjc/1087279.html www.bkjia.com true http://www.bkjia.com/PHPjc/1087279.html techarticle Php+jquery+ajax realize how to like the effect of the method (with the source download), Jqueryajax This article describes the Php+jquery+ajax to achieve the effect of liking the method. Share to everyone for your reference, as follows ...

