Commentez la fonction J'aime et Je n'aime pas implémentée par PHP combinée avec jQuery_jquery

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.

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. En enregistrant l'adresse IP de l'utilisateur, il peut déterminer si le comportement de vote de l'utilisateur est valide. système de vote. Si vous avez des connaissances de base en PHP, MySql et jQuery, continuez à lire.

Préparez-vous

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 nous écrivons une donnée. avec un identifiant de 1 par défaut. À des fins de 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.

 
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 très intuitive. résultats du vote.

 
<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

Nous devons utiliser CSS pour embellir la page. Nous utilisons une image diggs.png pour positionner les différents arrière-plans des 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 ne faut donc pas oublier 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, nous devons afficher les premiers résultats du vote, y compris le nombre de votes et le 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

L'acquisition des données se fait via do.php. Do.php se connecte à la base de données en fonction des paramètres passés par la page front-end, et entre respectivement dans les modules "j'aime", "je n'aime pas" et le traitement des données initiales. aux conditions. Voici la structure du code du module 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 ». Tout d'abord, elle détermine si l'adresse IP de l'utilisateur a déjà voté. S'il a voté, elle renverra directement l'invite correspondante. L'adresse IP de l'utilisateur n'a pas d'enregistrement de vote, il mettra à jour la table des votes, ajoutera 1 au nombre de votes correspondant, puis insérera l'enregistrement IP de l'utilisateur dans la table votes_ip. Si l'opération réussit, appelez jsons() pour afficher le numéro. des votes et du pourcentage après le vote, 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() est utilisée pour lire le nombre de votes pour l'ID correspondant dans le tableau des votes, calculer le pourcentage et enfin afficher ces informations au format json pour une utilisation par la page front-end.

 
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 fonctions d'interaction front-end et back-end implémentées par les principes d'Ajax. Il existe également une fonction get_client_ip() dans do.php pour obtenir la véritable adresse IP de l'utilisateur. J'ai déjà publié un article sur cette fonction. Elle a été incluse dans le code et peut être téléchargée. Je ne le publierai pas ici.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.