PHP, mysql을 통해 jQuery 기반의 등급 기능 구현-PHP 튜토리얼-php.cn

PHP, mysql을 통해 jQuery 기반의 등급 기능 구현

墨辰丷

풀어 주다： 2023-03-30 10:44:02

원래의

1480명이 탐색했습니다.

이 글은 주로 PHP와 mysql을 통한 jQuery 기반의 평가 기능 구현에 대해 소개하고 있으니 관심 있는 친구들이 참고하면 좋을 것 같습니다.

데이터베이스 디자인

먼저 두 개의 테이블을 준비합니다. pic 테이블은 사용자가 사진을 클릭한 후 사진의 이름, 경로 및 총 "좋아요" 수를 포함한 사진 정보를 저장합니다. 좋다.

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 &#39;0&#39;, 
 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.phpindex.php에서는 pic table의 이미지 정보를 PHP를 통해 읽어와 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 코드 사용자가 마음에 드는 사진에 빨간색 하트 버튼을 클릭하면 ajax 요청이 백그라운드 love.php로 전송되고 요청 응답이 성공한 후 원래 값은 다음과 같습니다. 업데이트되었습니다.
코드는 다음과 같습니다

$(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에 대한 클릭 기록이 있는지 알아냅니다. 만약 그렇다면 사용자에게 "좋아요"라고 알려주고, 그렇지 않으면 다음 작업을 수행합니다.
1. 그림 테이블에서 해당 그림 사랑 필드 값을 업데이트하고 값에 1을 더합니다.
2. 사용자의 IP 정보를 pic_ip 테이블에 기록하여 사용자가 반복적으로 클릭하는 것을 방지합니다.
3. 사진을 좋아하는 총 사용자 수인 업데이트된 사랑 값을 가져와서 프런트 엔드 페이지에 출력합니다.
코드는 다음과 같습니다.

<?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는 숫자 서식, 3마다 숫자를 구현합니다. 쉼표를 추가하는 함수

위 내용은 PHP, mysql을 통해 jQuery 기반의 등급 기능 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!