JQuery + Ajax + PHP to achieve "like" rating function with source code download, jqueryajax

JQuery + Ajax + PHP to achieve "like" rating function with source code download, jqueryajax

This article introduces a jQuery + Ajax + PHP code for implementing the "like" rating function. When you click the red-hearted button on your favorite image on the page, the front-end page sends an ajax request to the backend. After receiving the request, the PHP program in the backend queries whether the user's click record exists in the IP address library. If not, the corresponding value is + 1, at the same time, the user's IP information is written to the IP database, and vice versa, the user is "liked ".

 

Source code: http://xiazai.jb51.net/201509/yuanma/loveit (jb51.netw..rar

Implementation Process

Based on jQuery, this article implements a rating function through PHP and mysql, which is a simple and very good ajax application instance.

When a user clicks the red-hearted button on a favorite image on the page, the front-end page sends an ajax request to the background. After the background PHP program receives the request, check whether the user's click record exists in the IP address library. If no record exists, add the corresponding value to + 1 and write the user's IP address information to the IP address library, otherwise, the user is "liked ".

Database Design

Prepare two tables. The pic table stores the image information, including the image name, path, and total number of "liked" images. pic_ip records the IP address data after the user clicks the favorite image.

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 shortde_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 =" I like "class =" img_on "rel =" <? Php echo $ pic_id;?> "> <? Php echo $ love;?> </A> </p> </li> <? Php }?>

In 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-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 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. Get the updated love value, 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 love value echo $ love;} else {echo "Liked it .. ";}

The above content is the full content downloaded from the source code for the jQuery + Ajax + PHP "like" rating function.