简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Rumah
Artikel
Soal Jawab
Kursus
Topik
Muat turun
Permainan
Kamus
kemas kini terkini

Rumah  >  Artikel  >  pembangunan bahagian belakang  >  基于jQuery通过PHP与mysql实现了一个评级功能

基于jQuery通过PHP与mysql实现了一个评级功能

墨辰丷
墨辰丷asal
2018-06-07 09:46:101411semak imbas

本篇文章主要介绍基于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">
<?php
include_once("connect.php");
$sql = mysql_query("select * from pic");
while($row=mysql_fetch_array($sql)){
$pic_id = $row[&#39;id&#39;];
$pic_name = $row[&#39;pic_name&#39;];
$pic_url = $row[&#39;pic_url&#39;];
$love = $row[&#39;love&#39;];
?>
<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");
?>
 
 
<?php
include_once("connect.php");
$ip = get_client_ip();
$id = $_POST[&#39;id&#39;];
if(!isset($id) || empty($id)) exit;
$ip_sql=mysql_query("select ip from pic_ip where pic_id=&#39;$id&#39; and ip=&#39;$ip&#39;");
$count=mysql_num_rows($ip_sql);
if($count==0){
$sql = "update pic set love=love+1 where id=&#39;$id&#39;";
mysql_query( $sql);
$sql_in = "insert into pic_ip (pic_id,ip) values (&#39;$id&#39;,&#39;$ip&#39;)";
mysql_query( $sql_in);
$result = mysql_query("select love from pic where id=&#39;$id&#39;");
$row = mysql_fetch_array($result);
$love = $row[&#39;love&#39;];
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[&#39;REMOTE_ADDR&#39;]) && $_SERVER[&#39;REMOTE_ADDR&#39;] && strcasecmp($_SERVER[&#39;REMOTE_ADDR&#39;], "unknown"))
$ip = $_SERVER[&#39;REMOTE_ADDR&#39;];
else
$ip = "unknown";
return ($ip);
}
?>

代码中get_client_ip()函数是用来获取用户的真实IP。

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。

相关推荐：

PHP通过禁止IP频繁访问防止网站被防攻击

PHP+Mysql+jQuery实现的查询和列表框选择

php实现数字格式化，数字每三位加逗号的功能函数

Atas ialah kandungan terperinci 基于jQuery通过PHP与mysql实现了一个评级功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：使用PHP访问RabbitMQ消息队列的方法Artikel seterusnya：Laravel框架实现利用监听器进行sql语句记录功能

Artikel berkaitan

Lihat lagi