Implemented a rating function based on jQuery through PHP and mysql

This article mainly introduces the implementation of a rating function based on jQuery through PHP and mysql. Interested friends can refer to it. I hope it will be helpful to everyone.

Database Design

First prepare two tables. The pic table stores picture information, including the name, path and total number of "likes" of the picture, and pic_ip. Record the IP data after the user clicks like.

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.phpIn index.php, we read the image information in the pic table through PHP and display it, combined with CSS, to improve the page display effect.
The code is as follows

In CSS, we will define the dynamic effect of the mouse sliding towards and away from the red heart button, and position the button.The code is as follows

.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 codeWhen the user clicks the red heart button on the picture he likes, an ajax request is sent to the background love.php. After the request response is successful, the original is updated. value.
The code is as follows

$(function(){ $("p a").click(function(){ var love = $(this); var id = love.attr("rel"); //对应id love.fadeOut(300); //渐隐效果 $.ajax({ type:"POST", url:"love.php", data:"id="+id, cache:false, //不缓存此页面 success:function(data){ love.html(data); love.fadeIn(300); //渐显效果 } }); return false; }); });

love.php
The background love.php receives the ajax request from the front end and checks whether the user already exists in the IP table based on the submitted image id value. If there is a click record of the IP, it will tell the user that it has been "liked". Otherwise, perform the following operations:
1. Update the corresponding picture love field value in the picture table and add 1 to the value.
2. Write the user's IP information into the pic_ip table to prevent users from clicking repeatedly.
3. Get the updated love value, which is the total number of users who like the picture, and output the total to the front-end page.
The code is as follows

The get_client_ip() function in the code is used to obtain the user’s real IP.

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study.

Related recommendations:

PHP prevents website attacks by prohibiting frequent IP access

PHP Mysql jQuery Implemented query and list box selection

php realizes number formatting, functional function of adding commas for every three digits

The above is the detailed content of Implemented a rating function based on jQuery through PHP and mysql. For more information, please follow other related articles on the PHP Chinese website!