首頁 > 教學 > PHP 教學

基於jQuery通過PHP與mysql實現了一個評級功能

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
本篇文章主要介紹基於jQuery通過PHP與mysql實現了一個評級功能，感興趣的朋友參考下，希望對大家有所協助。

資料庫設計

先準備兩張表，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，提升頁面展示效果。
代碼如下

<!DOCTYPE HTML><html><head><meta charset="utf-8"><meta name="keywords" content="jquery"><meta name="description" content=""><title>jQuery+Ajax+PHP實現"喜歡"評級</title><link rel="stylesheet" type="text/css" href="../css/main.css" /><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script type="text/javascript">$(function(){$("p a").click(function(){var love = $(this);var id = love.attr("rel");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;});});</script><style type="text/css">.clear{clear:both}.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}</style></head><body><p id="main"><ul class="list"><?phpinclude_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><img src="images/<?php echo $pic_url;?>" alt="<?php echo $pic_name;?>"><p><a href="#" title="我喜歡" class="img_on" rel="<?php echo $pic_id;?>"><?php echo $love;?></a></p></li><?php }?></ul></p></body></html>

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值，即喜歡該圖片的使用者總數，並將該總數輸出給前端頁面。
代碼如下 

<?php$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");?>  <?phpinclude_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 "喜歡過了..";}//擷取使用者真實IPfunction get_client_ip() {if (getenv("HTTP_CLIENT_IP") && strcasecmp(getenv("HTTP_CLIENT_IP"), "unknown"))$ip = getenv("HTTP_CLIENT_IP");elseif (getenv("HTTP_X_FORWARDED_FOR") && strcasecmp(getenv("HTTP_X_FORWARDED_FOR"), "unknown"))$ip = getenv("HTTP_X_FORWARDED_FOR");elseif (getenv("REMOTE_ADDR") && strcasecmp(getenv("REMOTE_ADDR"), "unknown"))$ip = getenv("REMOTE_ADDR");elseif (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。

總結：以上就是本篇文的全部內容，希望能對大家的學習有所協助。

相關推薦：

PHP通過禁止IP頻繁訪問防止網站被防攻擊

PHP+Mysql+jQuery實現的查詢和列表框選擇

php實現數字格式化，數字每三位加逗號的功能函數

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More