Php + jQuery + Ajax: method for implementing thumb ups (with source code download), jqueryajax_PHP tutorial

Php + jQuery + Ajax: the method for implementing thumb ups (with source code download) and jqueryajax. Php + jQuery + Ajax: the method for implementing thumb ups (with source code download). This document describes how to implement thumb ups using php + jQuery + Ajax. For your reference, see the following methods for implementing thumb ups using php + jQuery + Ajax (with source code download) and jqueryajax.

This article provides examples of how to implement thumb ups using php + jQuery + Ajax. 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.

Articles you may be interested in:

• Php + xml combined with Ajax to implement a complete example of the like feature
• Php + mysql combined with Ajax to implement a complete example of the like feature
• JQuery + ajax
• Analysis of super simple thumb ups implemented by jQuery
• Image thumb up + 1 animation effect implemented by jQuery (with online demo and demo source code download)
• JQuery-implemented likes to display animation effects with random numbers (with online demonstration and demo source code download)
• JQuery's simple implementation of QQ space thumb ups has been canceled

Examples (with source code download): jqueryajax this article describes how php + jQuery + Ajax achieves the like effect. Share it with you for your reference. The details are as follows...