jQuery+Ajax+PHP實現“喜歡”評級功能代碼_PHP教程

本文章來給大家介紹一個jQuery+Ajax+PHP實現“喜歡”評級功能代碼，使用者點擊頁面中自己喜歡的圖片上的心型裝飾按鈕時，前端頁面向後台發送一個ajax請求，後台PHP程式接收請求後，查詢IP庫中是否已經有該使用者的點擊記錄，如果沒有，則將對應的數值+1，同時將該使用者IP資訊寫入IP庫，反之則告訴使用者已經“喜歡過了”。

資料庫設計

先準備兩張表，pic表儲存的是圖片資訊，包括圖片對應的名稱、路徑以及圖片“喜歡”總數，pic_ip則記錄使用者點擊喜歡後的IP資料。

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

在index.php中，我們通過PHP讀取pic表中的圖片資訊並展示出來，結合CSS，提升頁面展示效果。

代碼如下	複製代碼
jQuery+Ajax+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=""> ">

CSS中，我們將定義滑鼠滑向和離開心型裝飾按鈕的動態效果，並定位按鈕的位置。

代碼如下

複製代碼

.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代碼

當使用者點擊自己喜歡的圖片上的心型裝飾按鈕時，向後台love.php發送ajax請求，請求響應成功後，更新原有的數值。

代碼如下	複製代碼
$(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

後台love.php接收前端的ajax請求，根據提交的圖片id值，尋找IP表中是否已有該使用者ip的點擊記錄，如果有則告訴使用者已“喜歡過了”，反之，則進行一下操作：

1、更新圖片表中對應的圖片love欄位值，將數值加1。

2、將該使用者IP資訊寫入到pic_ip表中，用以防止使用者重複點擊。

3、擷取更新後的love值，即喜歡該圖片的使用者總數，並將該總數輸出給前端頁面。

代碼如下

複製代碼

$host="localhost"; $db_user="root"; $db_pass=""; $db_name="demo"; $timezone="Asia/Shanghai"; $link=mysql_connect($host,$db_user,$db_pass); mysql_select_db($db_name,$link); mysql_query("SET names UTF8"); ?> include_once("connect.php"); $ip = get_client_ip(); $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){ $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); } ?>

代碼中get_client_ip()函數是用來擷取使用者的真實IP

http://www.bkjia.com/PHPjc/444603.htmlwww.bkjia.comtruehttp://www.bkjia.com/PHPjc/444603.htmlTechArticle本文章來給大家介紹一個jQuery+Ajax+PHP實現“喜歡”評級功能代碼，使用者點擊頁面中自己喜歡的圖片上的心型裝飾按鈕時，前端頁面向後台發送一...

