Php+jquery+ajax method of realizing point-praise effect (source download) _php Tips

This paper illustrates the method of Php+jquery+ajax to achieve the point-praise effect. Share to everyone for your reference, specific as follows:

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 "praise" The total number, PIC_IP record the user clicks after 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.

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

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}
. List Li P A:hover{background-position:4px-25px;text-decoration:none}

jquery Code

When the user clicks the red button on his favorite picture, sends the AJAX request to the backstage love.php, after the request response succeeds, 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 front-end AJAX requests, according to the submitted picture ID value, to find whether the IP table has the user's IP click Record, if there is to tell the user has "praised", 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 value, that is, praise the picture of the total number of users, 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 ']; Gets the praise value
  echo $love;
} Else{
  echo "praised ...";
}

I uploaded the attachment to the database SQL you can directly create the test database UTF8 encoded, and then import the SQL file into. Modify the connection information of the database in connect.php.

Source file Click here to download the site.

Summarize:

In fact, it is an AJAX request, such as you want to praise a commodity. The commodity table must have a counting field. You send a request to go over this field +1

The success of the return of 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 will help you with the PHP program design.