Von PHP in Kombination mit jQuery_jquery implementierte Funktion „Gefällt mir' und „Gefällt mir nicht' für Kommentare-js-Tutorial-php.cn

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.

Dieser Artikel kombiniert Beispiele, um die mit PHP MySql jQuery implementierten Abstimmungsfunktionen zu erläutern. Durch die Aufzeichnung der IP des Benutzers kann festgestellt werden, ob das Abstimmungsverhalten des Benutzers gültig ist Abstimmungssystem. Wenn Sie über Grundkenntnisse in PHP, MySql und jQuery verfügen, lesen Sie bitte weiter.

Mach dich bereit

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, und wir schreiben ein Datenelement Zu Demonstrationszwecken wird die Tabelle votes_ip verwendet, um die IP-Adresse jedes Benutzers aufzuzeichnen. Das Programm bestimmt anhand der IP-Adresse des Benutzers, ob die Abstimmung gültig ist.

 
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;

Nach dem Login kopieren

HTML

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 sehr intuitiv macht Abstimmungsergebnisse.

 
<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>

Nach dem Login kopieren

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}

Nach dem Login kopieren

jQuery

Dieses Beispiel basiert ebenfalls auf jQuery. Sie dürfen daher nicht vergessen, zuerst die JQuery-Bibliotheksdatei auf der Seite zu laden.

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&#63;action=like",1); 
  }); 
  //单击“踩”时 
  $("#dig_down").click(function(){ 
    getdata("do.php&#63;action=unlike",1); 
  }); 
});

Nach dem Login kopieren

Dann initialisieren wir die Daten, d. h. nach dem Laden der Seite müssen wir die ersten Abstimmungsergebnisse anzeigen, einschließlich der Anzahl 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"); 
    } 
  }); 
}

Nach dem Login kopieren

PHP

Die Erfassung der Daten erfolgt über do.php. Do.php stellt gemäß den von der Front-End-Seite übergebenen Parametern eine Verbindung zur Datenbank her und gibt entsprechend die Module „Gefällt mir“, „Gefällt mir nicht“ und „Anfangsdaten“ ein Zu den Bedingungen gehört Folgendes:

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

Nach dem Login kopieren

Die Funktion likes() wird verwendet, um die Abstimmungsmodule „Gefällt mir“ und „Gefällt mir nicht“ zu verarbeiten. Zunächst wird ermittelt, ob die Benutzer-IP bereits abgestimmt hat, und die entsprechende Eingabeaufforderung wird zurückgegeben Wenn die Benutzer-IP keinen Abstimmungsdatensatz hat, wird die Stimmentabelle aktualisiert, 1 zur entsprechenden Anzahl von Stimmen hinzugefügt und dann der IP-Datensatz des Benutzers in die Tabelle votes_ip eingefügt. Rufen Sie jsons() auf, um die Nummer auszugeben Anzahl der Stimmen und Prozentsatz nach der Abstimmung, andernfalls geben Sie eine Meldung ein, die darauf hinweist, dass der Vorgang fehlgeschlagen ist.

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

Nach dem Login kopieren

Mit der Funktion jsons() wird die Anzahl der Stimmen für die entsprechende ID in der Stimmentabelle gelesen, der Prozentsatz berechnet und diese Informationen schließlich im JSON-Format zur Verwendung durch die Frontend-Seite ausgegeben.

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

Nach dem Login kopieren

Dieses Beispiel kann auf allgemeine „Gefällt mir“-, Zustimmungs- und Ablehnungskommentare, Abstimmungssysteme und andere Szenarien angewendet werden, wobei die durch die Ajax-Prinzipien implementierten Front-End- und Back-End-Interaktionsfunktionen verwendet werden. Es gibt auch eine Funktion get_client_ip(), um die echte IP des Benutzers zu erhalten. Ich habe bereits einen Artikel über diese Funktion veröffentlicht und kann ihn hier nicht herunterladen.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.