Php + jQuery + Ajax method for implementing the thumb up effect (with source code download)

This article mainly introduces how php + jQuery + Ajax implements the thumb up effect, and introduces in detail the specific steps and related skills of php and jQuery's ajax without refreshing new submission to implement the thumb up function in combination with examples, for more information about how to use php + jQuery + Ajax to implement thumb ups, see the example below. We will share this with you for your reference. The details are as follows:

Database Design

Prepare two tables. the pic table stores the image information, including the name, path, and total number of image "likes". pic_ip records the IP address data after users click likes.

CREATE TABLE IF NOT EXISTS `pic` ( `id` int(11) NOT NULL AUTO_INCREMENT, `pic_name` varchar(60) NOT NULL, `pic_url` varchar(60) NOT NULL, `love` int(11) NOT NULL DEFAULT '0', PRIMARY KEY (`id`)) ENGINE=MyISAM DEFAULT CHARSET=utf8;CREATE TABLE IF NOT EXISTS `pic_ip` ( `id` int(11) NOT NULL AUTO_INCREMENT, `pic_id` int(11) NOT NULL, `ip` varchar(40) NOT NULL, PRIMARY KEY (`id`)) ENGINE=MyISAM DEFAULT CHARSET=utf8

Index. php

In index. php, we use PHP to read and display the image information in the pic table, and use CSS to improve 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'];   ?>   
" alt="<?php echo $pic_name;?>">
"><?php echo $love;?>
<?php }?>

CSS, We will define the dynamic effect of moving the mouse to and from the red-hearted button, and locate the button position.

.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 you click the red-hearted button on your favorite image, send an ajax request to love. php in the background. after the request is responded successfully, update the original value.

$ (Function () {$ ("p "). click (function () {var love = $ (this); var id = love. attr ("rel"); // corresponds to id love. fadeOut (300); // gradient 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); // gradient effect}); return false ;});});

Love. php

Background love. php receives the front-end ajax request. based on the submitted image id value, it queries whether the user's IP address's click record exists in the ip address table. If yes, it indicates that the user has "liked". otherwise, perform the following operations:

1. update the image love Field value in the image table and add the value to 1.
2. write the user's IP address information to the pic_ip table to prevent repeated clicks.
3. obtain the updated likes, that is, the total number of users who like the image, and output the total number to the front-end page.

Include_once ("connect. php"); // connect to the database $ ip = get_client_ip (); // obtain the user IP address $ 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 is logged $ SQL = "update pic set love = love + 1 where id = '$ ID '"; // update the 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']; // Obtain the like value echo $ love;} else {echo "liked .. ";}

You can directly create the UTF8 encoding test database for the database SQL in the attachment I uploaded, and then import the SQL file. Modify the connection information of the database in connect. php.

Click here to download the source file.

Summary:

In fact, an ajax request is sent, for example, you want to like a product. The commodity table must have a counting field. You send a request to add this field to + 1

If this succeeds, a current number is returned. Then, 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 php programming.