So implementieren Sie „Gefällt mir“- und „Gefällt mir nicht“-Abstimmungsfunktionen mit PHP+jQuery

In diesem Artikel werden Beispiele kombiniert, um die Abstimmungsfunktionen „Gefällt mir“ und „Gefällt mir nicht“ zu erläutern, die mit PHP+MySql+jQuery implementiert werden, um festzustellen, ob das Abstimmungsverhalten des Benutzers gültig ist.

Wenn wir im Internet surfen und den Ansichten in den Webinhalten wie Artikeln und Kommentaren zustimmen oder nicht zustimmen möchten, können wir abstimmen, indem wir auf der Webseite auf „Gefällt mir“ und „Gefällt mir nicht“ klicken. Entwickler können den gesamten Interaktionsprozess asynchron über Ajax implementieren und so die Benutzererfahrung verbessern.

Wir müssen zuerst die MySQL-Datentabelle vorbereiten, die zum Ausführen der gesamten Instanz erforderlich ist. Die Stimmentabelle wird verwendet, um die Anzahl der Benutzerstimmen für entsprechende Artikel oder Kommentare aufzuzeichnen Schreiben Sie eine ID von 1. Die Tabelle „votes_ip“ wird zum Aufzeichnen der IP-Adresse jedes Benutzers verwendet. Das Programm bestimmt anhand der IP-Adresse des Benutzers, ob die Abstimmung gültig ist.

Datenblatt

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

in On Auf der Seite gibt es zwei Schaltflächen, die „Gefällt mir“ bzw. „Gefällt mir nicht“ darstellen, nämlich #dig_up und #dig_down. Die Anzahl der Stimmen und ihre jeweiligen Prozentsätze werden auf den Schaltflächen aufgezeichnet, was den Vergleich der Abstimmungsergebnisse sehr intuitiv macht.

<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

Wir müssen CSS verwenden, um die Seite zu verschönern, wir verwenden ein Bild-Diggs. PNG, um verschiedene Schaltflächenhintergründe zu positionieren und die Positionsbeziehung zwischen den einzelnen Elementen durch Festlegen der Position zu positionieren.

.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

Dieses Beispiel basiert auch auf jQuery, das dürfen Sie also nicht vergessen Es lädt zunächst die JQuery-Bibliotheksdatei auf die Seite.
Zunächst muss jQuery die Hintergrundbilder verarbeiten, die sich ändern, wenn die Maus über die beiden Abstimmungsschaltflächen fährt, was durch addClass() und removeClass() erreicht wird.

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

Dann initialisieren wir die Daten, das heißt, nachdem die Seite geladen ist, müssen wir die ersten Abstimmungsergebnisse einschließlich der Anzahl anzeigen der Stimmen und des Prozentsatzes. Wir schreiben den Vorgang zum Abrufen von Daten in einer benutzerdefinierten Funktion getdata() und schließen das Laden der Daten ab, indem wir verschiedene Anforderungsadressen und ID-Parameter übergeben. In der Funktion getdata() wird eine Ajax-Anfrage an die URL gesendet. Wenn die Abstimmung erfolgreich ist, wird der entsprechende Elementinhalt auf der Seite geändert, einschließlich der Anzahl der Stimmen und der Prozentsatz.

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

Die Datenerfassung erfolgt über do.php do.php Stellt gemäß den von der Front-End-Seite übergebenen Parametern eine Verbindung zur Datenbank her und gibt die Module „Gefällt mir“, „Gefällt mir nicht“ und die anfänglichen Datenverarbeitungsmodule gemäß den Bedingungen ein. Das Folgende ist die Codestruktur des do.php-Moduls:

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

Die Funktion likes() wird verwendet, um die Abstimmungsmodule „Gefällt mir“ und „Gefällt mir nicht“ zu verarbeiten. Zunächst wird ermittelt, ob der Benutzer eine IP hat Wenn bereits abgestimmt wurde, wird die entsprechende Eingabeaufforderung direkt zurückgegeben. Wenn die Benutzer-IP keinen Abstimmungsdatensatz hat, aktualisieren Sie die Stimmentabelle, addieren Sie die entsprechende Anzahl von Stimmen und fügen Sie dann den IP-Datensatz des Benutzers ein votes_ip-Tabelle. Wenn der Vorgang erfolgreich ist, rufen Sie jsons() auf, um die Anzahl der Stimmen und den Prozentsatz nach der Abstimmung usw. auszugeben. Andernfalls schlägt der Eingabevorgang fehl.

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

Die Funktion jsons() wird verwendet, um die Anzahl der Stimmen für die entsprechende ID in der Stimmentabelle auszulesen, den Prozentsatz zu berechnen und schließlich Konvertieren Sie diese Informationen in das JSON-Format. Ausgabe zur Verwendung durch Front-End-Seiten.

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

Dieses Beispiel kann auf allgemeine „Gefällt mir“-, Zustimmungs- und Ablehnungskommentare, Abstimmungssysteme und andere Szenarien angewendet werden, die mithilfe von Ajax-Prinzipien implementiert werden. interaktive End- und Back-End-Funktionen. Es gibt auch eine Funktion get_client_ip() in do.php, um die echte IP des Benutzers zu erhalten.

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird.

Verwandte Empfehlungen:

php Verarbeitungsmethode zum Abrufen von XML-Schnittstellendaten

phpMehrere Möglichkeiten, um die ID der gerade eingefügten Daten abzurufen

phpMethoden zum Kapseln der MySQL-Klasse basierend auf dem Singleton-Modus

Das obige ist der detaillierte Inhalt vonSo implementieren Sie „Gefällt mir“- und „Gefällt mir nicht“-Abstimmungsfunktionen mit PHP+jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!