jQuery+Ajax+PHP implements 'like' rating function code_PHP tutorial
WBOYOriginal
2016-07-20 11:11:57777browse
This article will introduce to you a jQuery+Ajax+PHP code to implement the "like" rating function. When the user clicks the red heart button on the picture he likes on the page, the front-end page sends an ajax request to the background. After the background PHP program receives the request, Check whether there is already a click record of the user in the IP library. If not, add the corresponding value by 1 and write the user's IP information into the IP library. Otherwise, the user will be told that he has "liked it".
Database design
First prepare two tables. The pic table saves picture information, including the name, path and total number of "likes" of the picture. Pic_ip records the user's clicks on likes. IP data.
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 pass PHP Read the image information in the pic table and display it, combined with CSS, to improve the page display effect.
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
Copy code
代码如下
复制代码
.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}
.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. numerical value.
代码如下
复制代码
$(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; }); });
The code is as follows
Copy code
$(function(){ $("p a").click(function(){ var love = $(this); var id = love.attr("rel"); //corresponding id love.fadeOut(300); //fade out effect $.ajax({ type: "POST" , url: "love.php", data: "id ="+id, cache: false, // not cache this page SUCCESS: Function (data) { love.html(data); > }); });
love.php
The background love.php receives the ajax request from the front end, and based on the submitted image id value, checks whether there is a click record of the user's IP in the IP table. If so, it tells the user that it has been " "I liked it", otherwise, perform the following operations:
1. Update the corresponding image love field value in the image 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.
$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){ $sql = "update pic set love=love+1 where id='$id'"; mysql_query( $sql); $sql_in = "insert into pic_ip (pic_id,ip) values ('$id','$ip')"; mysql_query( $sql_in); $result = mysql_query("select love from pic where id='$id'"); $row = mysql_fetch_array($result); $love = $row['love']; echo $love; }else{ echo "喜欢过了.."; }
//获取用户真实IP function get_client_ip() { if (getenv("HTTP_CLIENT_IP") && strcasecmp(getenv("HTTP_CLIENT_IP"), "unknown")) $ip = getenv("HTTP_CLIENT_IP"); else if (getenv("HTTP_X_FORWARDED_FOR") && strcasecmp(getenv("HTTP_X_FORWARDED_FOR"), "unknown")) $ip = getenv("HTTP_X_FORWARDED_FOR"); else if (getenv("REMOTE_ADDR") && strcasecmp(getenv("REMOTE_ADDR"), "unknown")) $ip = getenv("REMOTE_ADDR"); else if (isset ($_SERVER['REMOTE_ADDR']) && $_SERVER['REMOTE_ADDR'] && strcasecmp($_SERVER['REMOTE_ADDR'], "unknown")) $ip = $_SERVER['REMOTE_ADDR']; else $ip = "unknown"; return ($ip); } ?>
$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 ){<🎜>$sql = "update pic set love=love+1 where id='$id'";<🎜>mysql_query( $sql);<🎜>$sql_in = "insert into pic_ip (pic_id,ip) values ('$id','$ip')";<🎜>mysql_query( $sql_in);<🎜>$result = mysql_query("select love from pic where id='$id'");<🎜>$ row = mysql_fetch_array($result);<🎜>$love = $row['love'];<🎜>echo $love;<🎜>}else{<🎜>echo "I liked it..";<🎜> }<🎜><🎜>//Get the user’s real IP<🎜>function get_client_ip() {<🎜>if (getenv("HTTP_CLIENT_IP") && strcasecmp(getenv("HTTP_CLIENT_IP"), "unknown"))<🎜> $ip = getenv("HTTP_CLIENT_IP");<🎜>else<🎜>if (getenv("HTTP_X_FORWARDED_FOR") && strcasecmp(getenv("HTTP_X_FORWARDED_FOR"), "unknown"))<🎜>$ip = getenv("HTTP_X_FORWARDED_FOR" ");<🎜>else<🎜>if (getenv("REMOTE_ADDR") && strcasecmp(getenv("REMOTE_ADDR"), "unknown"))<🎜>$ip = getenv("REMOTE_ADDR");<🎜>else <🎜>if (isset ($_SERVER['REMOTE_ADDR']) && $_SERVER['REMOTE_ADDR'] && strcasecmp($_SERVER['REMOTE_ADDR'], "unknown"))<🎜>$ip = $_SERVER['REMOTE_ADDR '];<🎜>else<🎜>$ip = "unknown";<🎜>return ($ip);<🎜>}<🎜>?> The get_client_ip() function in the code is used to obtain the user’s real IP
http://www.bkjia.com/PHPjc/444603.htmlwww.bkjia.comtruehttp: //www.bkjia.com/PHPjc/444603.htmlTechArticleThis article will introduce to you a jQuery+Ajax+PHP code to implement the "like" rating function. Users click on the page When you click the red heart button on the picture you like, the front-end page sends a message to the background...
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn