Comment implémenter les fonctions de vote 'J'aime' et 'Je n'aime pas' en utilisant php+jQuery

Cet article combine des exemples pour expliquer les fonctions de vote « j'aime » et « je n'aime pas » implémentées à l'aide de PHP+MySql+jQuery pour déterminer si le comportement de vote de l'utilisateur est valide.

Lorsque nous naviguons sur le Web et que nous souhaitons être d'accord ou en désaccord avec les points de vue exprimés dans le contenu Web, tels que les articles et les commentaires, nous pouvons voter en cliquant sur "J'aime" et "Je n'aime pas" sur la page Web. Les développeurs peuvent implémenter l'ensemble du processus d'interaction de manière asynchrone via ajax, améliorant ainsi l'expérience utilisateur.

Nous devons d'abord préparer la table de données MySQL requise pour exécuter l'intégralité de l'instance. L'instance nécessite deux tables. La table des votes est utilisée pour enregistrer le nombre de votes des utilisateurs pour les articles ou commentaires correspondants, et par défaut nous. écrire un identifiant de Les données de 1 sont utilisées pour la démonstration. La table votes_ip est utilisée pour enregistrer l'adresse IP du vote de chaque utilisateur. Le programme détermine si le vote est valide en fonction de l'adresse IP de l'utilisateur.

Fiche technique

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

Sur la page, il y a deux boutons qui représentent respectivement « j'aime » et « je n'aime pas », à savoir #dig_up et #dig_down. Le nombre de votes et leurs pourcentages respectifs sont enregistrés sur les boutons, ce qui rend la comparaison des résultats de vote très intuitive.

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

CSS

Il faut utiliser du CSS pour embellir la page, on utilise une image diggs.png pour positionner différents arrière-plans de boutons et positionner la relation de position entre chaque élément en définissant la position.

.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

Cet exemple s'appuie également sur jQuery, il doit donc pas oublié de charger d'abord le fichier de la bibliothèque jquery dans la page.
Tout d'abord, jQuery doit traiter les images d'arrière-plan qui changent lorsque la souris glisse respectivement sur les deux boutons de vote, ce qui est réalisé via addClass() et 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?action=like",1); 
 }); 
 //单击“踩”时 
 $("#dig_down").click(function(){ 
  getdata("do.php?action=unlike",1); 
 }); 
});

Ensuite, nous initialisons les données, c'est-à-dire qu'une fois la page chargée, les résultats du vote initial doivent être affichés, y compris le nombre de voix et tout pourcentage. Nous écrivons l'opération d'obtention de données dans une fonction personnalisée getdata() et terminons le chargement des données en transmettant différentes adresses de requête et paramètres d'identification. Dans la fonction getdata(), une requête ajax est envoyée à l'URL. Selon le résultat du traitement en arrière-plan, si le vote est réussi, le contenu de l'élément correspondant dans la page sera modifié, y compris le nombre de votes et le nombre de votes. pourcentage.

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

Les données sont obtenues via do.php Terminé, faites .php se connecte à la base de données en fonction des paramètres transmis par la page front-end et entre dans les modules de traitement des données "j'aime", "je n'aime pas" et initial selon les conditions. Voici la structure du code du module do.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); 
}

La fonction likes() est utilisée pour gérer les modules de vote "j'aime" et "je n'aime pas". Elle détermine d'abord si l'adresse IP de l'utilisateur. a déjà voté. S'il a déjà voté, il renvoie directement l'invite correspondante, si l'adresse IP de l'utilisateur n'a pas d'enregistrement de vote, mettez à jour la table des votes, ajoutez le numéro de vote correspondant par 1, puis insérez l'enregistrement IP de l'utilisateur dans la table votes_ip. . Si l'opération réussit, appelez jsons() pour afficher le numéro de vote et la somme après le vote. Pourcentage et autres données, sinon entrez un message d'invite indiquant que l'opération a échoué.

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?'您已经顶过了':'您已经踩过了'; 
  $arr['success'] = 0; 
  $arr['msg'] = $msg; 
  echo json_encode($arr); 
 } 
}

La fonction jsons() permet de lire le nombre de votes pour l'identifiant correspondant dans le tableau des votes, et de calculer le pourcentage , et enfin utilisez ces informations pour sortir au format json pour une utilisation par les pages frontales.

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); 
}

Cet exemple peut être appliqué aux commentaires courants "J'aime", d'accord et pas d'accord, aux systèmes de vote et à d'autres scénarios, en utilisant les principes d'Ajax. fonctions d'interaction front-end et back-end. Il existe également une fonction get_client_ip() dans do.php pour obtenir la véritable adresse IP de l'utilisateur.

Résumé : Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.

Recommandations associées :

php Méthode de traitement pour obtenir les données de l'interface XML

phpPlusieurs façons d'obtenir l'identifiant des données qui viennent d'être insérées

phpMéthodes pour encapsuler la classe mysql basée sur le mode singleton

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!