PHP, MySql, jQuery는 '좋아요' 및 '싫어요' 투표 기능을 구현합니다.

존재하지 않는 경우 테이블 생성 `votes` (
 `id` int(10) NOT NULL AUTO_INCREMENT,
 `likes` int(10) NOT NULL DEFAULT '0',
 `unlikes` int(10) NOT NULL DEFAULT '0',
 PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
`votes`에 삽입(`id`, `likes`, `unlikes`) 값
(1, 30, 10)

존재하지 않는 경우 테이블 생성 `votes_ip`(
 `id` int(10) NOT NULL,
 `vid` int(10) NOT NULL,
 `ip` varchar(40) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

코드 복사

.digg{너비:420px; 높이:120px; 여백:80px 자동 20px 자동; 위치:상대}

.digdown{배경:url(diggs.png) 반복 안함 4px -102px;}
.digdown_on{배경:url(diggs.png) 반복 없음 4px -154px;}
#num_up,#num_down{position:absolute; right:6px;
#dig_up p{height:24px; line-height:24px; color:#360}
#dig_down p{height:24px; line-height:24px; color:#f30}
.bar 너비:100px; 선 높이:12px; 테두리:1px
위치:상대적; 텍스트 정렬:중심}
스팬{display:block;
.bar i{위치:절대; 상단:0; 왼쪽:104px;}
#bar_up 스팬{배경:#360}
#bar_down 스팬{배경:#f60}
#msg 위치:절대:20px; 상단:40px; 색상:#f00}



코드 복사



이 예제도 jQuery에 의존하므로 먼저 페이지에 jquery 라이브러리 파일을 로드하는 것을 잊지 말아야 합니다.
먼저 jQuery는 두 개의 투표 버튼 위로 마우스를 이동할 때 변경되는 배경 이미지를 각각 처리해야 하며, 이는 addClass() 및 RemoveClass()를 통해 수행됩니다.

$(function(){

//마우스가 투표 버튼 방향으로 또는 반대 방향으로 슬라이드할 때 배경 스타일 변경

 $(this).removeClass("digup_on");
 });
 $("#dig_down").hover(function(){
 $(this).addClass("digdown_on");
 },function(){
 $(this ).removeClass("digdown_on");
 });

 //데이터 초기화
 getdata("do.php",1)

 // "
 클릭 $("#dig_up").click(function(){
 getdata("do.php?action=like",1);
 });
 //단일 경우 "좋아요" 클릭
 $("#dig_down").click(function(){
 getdata("do.php?action=unlike",1);
 }); ;



코드 복사


그런 다음 데이터를 초기화합니다. 즉, 페이지가 로드된 후 투표 수와 백분율을 포함한 초기 투표 결과가 표시되어야 합니다.
사용자 정의 함수 getdata()에서 데이터를 얻는 작업을 작성하고 다양한 요청 주소와 ID 매개변수를 전달하여 데이터 로드를 완료합니다.
getdata() 함수에서 ajax 요청은 백그라운드 처리의 반환 결과에 따라 투표에 성공하면 투표 수와 페이지의 해당 요소 내용이 변경됩니다. 백분율.
 

function getdata(url,sid){
 $.getJSON(url,{id:sid},function(data){
 if (data.success==1){//투표 성공
 $("#num_up").html(data.like)
 //폭을 조절하여 진행률 표시줄 효과 표시
 $ ( "#bar_up 범위").css("width",data.like_percent)
 $("#bar_up i").html(data.like_percent)
 $("#num_down").html ( data.unlike);
 $("#bar_downspan").css("width",data.unlike_percent)
 $("#bar_down i").html(data.unlike_percent); > }else{//투표 실패 bbs.it-home.org
 $("#msg").html(data.msg).show().css({'opacity':1,'top': ' 40px'})
 .animate({top:'-50px',opacity:0}, "느림")
 }
 })
}
4, php 코드 부분
do.php를 통해 데이터 획득이 완료됩니다. Do.php는 프런트엔드 페이지에서 전달된 매개변수에 따라 데이터베이스에 연결하고 조건에 따라 "상위", "좋아요" 및 초기 데이터 처리 모듈에 들어갑니다. 다음은 do.php 모듈 코드 구조입니다:
 
include_once("connect.php");//데이터베이스에 연결

$action = $ _GET[ 'action'];
$id = 1;
$ip = get_client_ip();//IP 가져오기

if($action=='like'){//Top
 likes(1,$id,$ip);
}elseif($action=='unlike'){//dislike
 likes(0,$id,$ip)
}else {
 echo jsons($id);


 $ip_sql=mysql_query("다음에서 IP 선택 vote_ip where vid='$id' and ip='$ip'");
 $count=mysql_num_rows($ip_sql);
 if($count==0){//아직 좋아요가 없습니다
 if($type==1){//Like
 $sql = "update vote set likes=likes 1 where id=".$id;
 }else{//Dislike
 $sql = " update vote set likes=unlikes 1 where id=".$id;
 }
 mysql_query($sql);

 $sql_in = "vote_ip(vid,ip) 값에 삽입 ​​( ' $id','$ip')";
 mysql_query($sql_in);

 if(mysql_insert_id()>0){
 echo jsons($id);
 } else{
 $arr['success'] = 0;
 $arr['msg'] = '작업이 실패했습니다. 다시 시도하세요.'
 echo json_encode($arr) }
 }else{
 $msg = $type==1?'좋아요를 표시했습니다':'좋아요를 표시하지 않았습니다'
 $arr['success'] = 0
 $ arr[' msg'] = $msg;
 echo json_encode($arr);
 }
}



코드 복사


function jsons($id){
 $query = mysql_query("select * from vote where id=". $id);
 $row = mysql_fetch_array($query);
 $like = $row['likes']
 $unlike = $row['unlikes']; '성공']=1;
 $arr['like'] = $like;
 $arr['unlike'] = $unlike
 $like_percent = round($like/($like $ like),3)*100;
 $arr['like_percent'] = $like_percent.'%'
 $arr['unlike_percent'] = (100-$like_percent)

 return json_encode($arr);
}



코드 복사