jQuery_jquery와 결합된 PHP로 구현된 댓글 좋아요 및 싫어요 기능-JS 튜토리얼-php.cn

웹을 탐색할 때 기사, 댓글 등 웹 콘텐츠의 견해에 동의하거나 반대하고 싶을 때 웹 페이지에서 '좋아요'와 '좋아요'를 클릭하여 투표할 수 있습니다. 개발자는 ajax를 통해 전체 상호 작용 프로세스를 비동기적으로 구현할 수 있으므로 사용자 경험이 향상됩니다.

이 기사에서는 PHP MySql jQuery를 사용하여 구현된 "좋아요" 및 "비추천" 투표 기능을 설명하는 예제를 결합하여 사용자의 IP를 기록함으로써 사용자의 투표 행동이 유효한지 여부를 확인할 수 있습니다. 투표 시스템. PHP, MySql, jQuery에 대한 기본 지식이 있다면 계속해서 읽어보시기 바랍니다.

준비하세요

먼저 전체 인스턴스를 실행하는 데 필요한 mysql 데이터 테이블을 준비해야 합니다. 인스턴스에는 두 개의 테이블이 필요합니다. vote 테이블은 해당 기사나 댓글에 대한 사용자 투표 수를 기록하는 데 사용되며, 일부 데이터를 작성합니다. 기본적으로 ID는 1입니다. 데모를 위해 vote_ip 테이블은 각 사용자의 투표 IP를 기록하는 데 사용됩니다. 프로그램은 사용자의 IP를 기반으로 투표가 유효한지 여부를 결정합니다.

 
CREATE TABLE IF NOT EXISTS `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; 
 
 
INSERT INTO `votes` (`id`, `likes`, `unlikes`) VALUES 
(1, 30, 10); 
 
CREATE TABLE IF NOT EXISTS `votes_ip` ( 
 `id` int(10) NOT NULL, 
 `vid` int(10) NOT NULL, 
 `ip` varchar(40) NOT NULL 
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

로그인 후 복사

HTML

페이지에는 각각 '좋아요'와 '싫어요'를 나타내는 두 개의 버튼, 즉 #dig_up과 #dig_down이 버튼에 기록되어 있어 매우 직관적으로 비교할 수 있습니다. 투표 결과.

 
<div class="digg"> 
  <div id="dig_up" class="digup"> 
    <span id="num_up"></span> 
    <p>很好，很强大！</p> 
    <div id="bar_up" class="bar"><span></span><i></i></div> 
  </div> 
    <div id="dig_down" class="digdown"> 
    <span id="num_down"></span> 
    <p>太差劲了！</p> 
    <div id="bar_down" class="bar"><span></span><i></i></div> 
  </div> 
  <div id="msg"></div> 
</div>

로그인 후 복사

CSS

페이지를 아름답게 하려면 CSS를 사용해야 합니다. diggs.png 그림을 사용하여 다양한 버튼 배경을 배치하고 위치를 설정하여 각 요소 간의 위치 관계를 배치합니다.

 
.digg{width:420px; height:120px; margin:80px auto 20px auto; position:relative} 
#dig_up,#dig_down{width:200px; height:48px; margin:10px; position:relative; 
border:1px solid #d3d3d3; padding-left:42px; cursor:pointer} 
.digup{background:url(diggs.png) no-repeat 4px 2px;} 
.digup_on{background:url(diggs.png) no-repeat 4px -49px;} 
.digdown{background:url(diggs.png) no-repeat 4px -102px;} 
.digdown_on{background:url(diggs.png) no-repeat 4px -154px;} 
#num_up,#num_down{position:absolute; right:6px; top:18px; font-size:20px;} 
#dig_up p{height:24px; line-height:24px; color:#360} 
#dig_down p{height:24px; line-height:24px; color:#f30} 
.bar{width:100px; height:12px; line-height:12px; border:1px solid #f0f0f0; 
position:relative; text-align:center} 
.bar span{display:block; height:12px; } 
.bar i{position:absolute; top:0; left:104px;} 
#bar_up span{background:#360} 
#bar_down span{background:#f60} 
#msg{position:absolute; right:20px; top:40px; font-size:18px; color:#f00}

로그인 후 복사

jQuery

이 예제도 jQuery를 사용하므로 먼저 페이지에 jquery 라이브러리 파일을 로드하는 것을 잊지 마세요.

먼저 jQuery는 addClass()와 RemoveClass()를 통해 각각 두 개의 투표 버튼 위로 마우스를 이동할 때 변경되는 배경 이미지를 처리해야 합니다.

 
$(function(){ 
  //鼠标滑向和离开投票按钮时，变换背景样式 
  $("#dig_up").hover(function(){ 
    $(this).addClass("digup_on"); 
  },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&#63;action=like",1); 
  }); 
  //单击“踩”时 
  $("#dig_down").click(function(){ 
    getdata("do.php&#63;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 span").css("width",data.like_percent); 
      $("#bar_up i").html(data.like_percent); 
      $("#num_down").html(data.unlike); 
      $("#bar_down span").css("width",data.unlike_percent); 
      $("#bar_down i").html(data.unlike_percent); 
    }else{//投票失败 
      $("#msg").html(data.msg).show().css({'opacity':1,'top':'40px'}) 
      .animate({top:'-50px',opacity:0}, "slow"); 
    } 
  }); 
}

로그인 후 복사

PHP

데이터 획득은 do.php를 통해 이루어집니다. Do.php는 프런트 엔드 페이지에서 전달된 매개변수에 따라 데이터베이스에 연결하고 그에 따라 각각 "좋아요", "좋아요" 및 초기 데이터 처리 모듈을 입력합니다. 다음은 PHP 모듈 코드 구조입니다.

 
include_once("connect.php");//连接数据库 
 
$action = $_GET['action']; 
$id = 1; 
$ip = get_client_ip();//获取ip 
 
if($action=='like'){//顶 
  likes(1,$id,$ip); 
}elseif($action=='unlike'){//踩 
  likes(0,$id,$ip); 
}else{ 
  echo jsons($id); 
}

로그인 후 복사

likes() 함수는 "좋아요" 및 "비추천" 투표 모듈을 처리하는 데 사용됩니다. 먼저 사용자 IP가 투표한 경우 해당 프롬프트를 직접 반환합니다. 사용자 IP에 투표 기록이 없으면 vote 테이블을 업데이트하고 해당 투표 수에 1을 추가한 다음 사용자의 IP 기록을 vote_ip 테이블에 삽입합니다. 작업이 성공하면 jsons()를 호출하여 숫자를 출력합니다. 투표 후 투표율 및 백분율을 입력합니다. 그렇지 않으면 작업이 실패했음을 나타내는 프롬프트 메시지를 입력합니다.

 
function likes($type,$id,$ip){ 
  $ip_sql=mysql_query("select ip from votes_ip where vid='$id' and ip='$ip'"); 
  $count=mysql_num_rows($ip_sql); 
  if($count==0){//还没有顶过 
    if($type==1){//顶 
      $sql = "update votes set likes=likes+1 where id=".$id; 
    }else{//踩 
      $sql = "update votes set unlikes=unlikes+1 where id=".$id; 
    } 
    mysql_query($sql); 
     
    $sql_in = "insert into votes_ip (vid,ip) values ('$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&#63;'您已经顶过了':'您已经踩过了'; 
    $arr['success'] = 0; 
    $arr['msg'] = $msg; 
    echo json_encode($arr); 
  } 
}

로그인 후 복사

jsons() 함수는 투표 테이블에서 해당 ID에 대한 투표 수를 읽고 백분율을 계산한 후 최종적으로 이 정보를 프런트 엔드 페이지에서 사용할 수 있도록 json 형식으로 출력하는 데 사용됩니다.

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

로그인 후 복사

이 예는 Ajax 원칙에 따라 구현된 프런트엔드 및 백엔드 상호 작용 기능을 사용하여 일반적인 '좋아요', 동의 및 반대 의견, 투표 시스템 및 기타 시나리오에 적용될 수 있습니다. do.php에는 사용자의 실제 IP를 얻기 위한 함수 get_client_ip()도 있습니다. 이전에 이 함수에 대한 기사를 게시한 적이 있으며 여기에는 다운로드할 수 없습니다.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.