jQuery+Ajax+PHP"좋아요"등급 평가 기능 부 원 코드 다운로드 실현

이 글 은 jQuery+Ajax+PHP 가'좋아요'등급 평가 기능 코드 를 실현 하 는 것 을 소개 합 니 다.사용자 가 페이지 에서 좋아 하 는 그림 의 하트 단 추 를 클릭 할 때 전단 페이지 는 배경 에 ajax 요청 을 보 냅 니 다.배경 PHP 프로그램 이 요청 을 받 은 후에 IP 라 이브 러 리 에 해당 사용자 의 클릭 기록 이 있 는 지,없 으 면 해당 하 는 수 치 를+1 합 니 다.동시에 이 사용자 의 IP 정 보 를 IP 라 이브 러 리 에 기록 하고 반대로 사용자 에 게 이미'좋아 했다'고 알려 준다.
 
 원본 다운로드 주소:http://xiazai.jb51.net/201509/yuanma/loveit(jb51.net).rar
실현 과정
본 고 는 jQuery 를 바탕 으로 PHP 와 my sql 을 통 해 등급 평가 기능 을 실 현 했 고 간단 하고 좋 은 ajax 응용 인 스 턴 스 입 니 다.
사용자 가 페이지 에서 자신 이 좋아 하 는 그림 의 하트 단 추 를 눌 렀 을 때 전단 페이지 는 배경 에 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 와 결합 하여 페이지 전시 효 과 를 향상 시 킵 니 다.

<?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']; 
  ?> 
  <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 }?> 

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 값 을 가 져 옵 니 다.즉,이 그림 을 좋아 하 는 사용자 의 총 수 를 가 져 오고 이 총 수 를 전단 페이지 에 출력 합 니 다.

include_once("connect.php"); //      
$ip = get_client_ip(); //    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']; //  love   
 echo $love; 
}else{ 
 echo "    .."; 
} 

이상 의 내용 은 jQuery+Ajax+PHP 가'좋아요'등급 평가 기능 을 실현 하고 소스 코드 를 첨부 하여 다운로드 한 모든 내용 입 니 다.마음 에 드 셨 으 면 좋 겠 습 니 다.