PHP kombiniert die Ajax-Non-Refresh-Übermittlung von jQuery, um die Like-Funktion zu implementieren

In diesem Artikel wird hauptsächlich die Ajax-Non-Refresh-Übermittlung von PHP in Kombination mit jQuery vorgestellt, um die Like-Funktion zu realisieren. Ich hoffe, dass es für alle hilfreich ist.

Datenbankdesign

Bereiten Sie zunächst zwei Tabellen vor. In der Bildtabelle werden Bildinformationen gespeichert, darunter der Name, der Pfad und die Gesamtzahl der „Likes“ des Bildes Erfassen Sie die IP-Daten der Benutzer, nachdem Sie auf „Gefällt mir“ geklickt haben.

CREATE TABLE IF NOT EXISTS `pic` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `pic_name` varchar(60) NOT NULL,
 `pic_url` varchar(60) NOT NULL,
 `love` int(11) NOT NULL DEFAULT '0',
 PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
CREATE TABLE IF NOT EXISTS `pic_ip` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `pic_id` int(11) NOT NULL,
 `ip` varchar(40) NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8

index.php

In index.php lesen wir die Bildinformationen in der Bildtabelle über PHP und zeigen sie in Kombination mit CSS an, um die Seite zu verbessern Anzeigeeffekt. In

<?php
   include_once("connect.php");
   $sql = mysql_query("select * from pic");
   while($row=mysql_fetch_array($sql)){
     $pic_id = $row[&#39;id&#39;];
     $pic_name = $row[&#39;pic_name&#39;];
     $pic_url = $row[&#39;pic_url&#39;];
     $love = $row[&#39;love&#39;];
   ?>
   <li><img src="images/<?php echo $pic_url;?>" alt="<?php echo $pic_name;?>"><p><a href="#"
title="赞"class="img_on" rel="<?php echo $pic_id;?>"><?php echo $love;?></a></p></li>
<?php }?>

CSS definieren wir den dynamischen Effekt, wenn die Maus auf die rote Herzschaltfläche zu und von ihr weg gleitet, und positionieren die Schaltfläche.

.list{width:760px; margin:20px auto}
.list li{float:left; width:360px; height:280px; margin:10px; position:relative}
.list li p{position:absolute; top:0; left:0; width:360px; height:24px; line-height:24px;
background:#000; opacity:.8;filter:alpha(opacity=80);}
.list li p a{padding-left:30px; height:24px; background:url(images/heart.png) no-repeat
4px -1px;color:#fff; font-weight:bold; font-size:14px}
.list li p a:hover{background-position:4px -25px;text-decoration:none}

jQuery-Code

Wenn der Benutzer auf dem Bild, das ihm gefällt, auf die rote Herzschaltfläche klickt, wird nach der Anfrage eine Ajax-Anfrage an den Hintergrund gesendet Antwort ist erfolgreich, das Original Einige Werte

$(function(){
  $("p a").click(function(){
    var love = $(this);
    var id = love.attr("rel"); //对应id
    love.fadeOut(300); //渐隐效果
    $.ajax({
      type:"POST",
      url:"love.php",
      data:"id="+id,
      cache:false, //不缓存此页面
      success:function(data){
        love.html(data);
        love.fadeIn(300); //渐显效果
      }
    });
    return false;
  });
});

love.php

Der Hintergrund love.php empfängt die Ajax-Anfrage vom Frontend und basiert auf dem Der übermittelte Bild-ID-Wert ermittelt, ob die IP-Tabelle die IP des Benutzers bereits enthält. Wenn ein Klickdatensatz für die IP des Benutzers vorhanden ist, wird dem Benutzer mitgeteilt, dass das Bild „geliked“ wurde. Andernfalls führen Sie die folgenden Vorgänge aus:

1. Aktualisieren Sie den entsprechenden Bildliebesfeldwert in der Bildtabelle und addieren Sie 1 zum Wert.
2. Schreiben Sie die IP-Informationen des Benutzers in die pic_ip-Tabelle, um zu verhindern, dass Benutzer wiederholt klicken.
3. Rufen Sie den aktualisierten Like-Wert ab, der die Gesamtzahl der Benutzer angibt, denen das Bild gefällt, und geben Sie die Gesamtzahl auf der Startseite aus.

include_once("connect.php"); //连接数据库
$ip = get_client_ip(); //获取用户IP
$id = $_POST['id'];
if(!isset($id) || empty($id)) exit;
$ip_sql=mysql_query("select ip from pic_ip where pic_id='$id' and ip='$ip'");
$count=mysql_num_rows($ip_sql);
if($count==0){ //如果没有记录
  $sql = "update pic set love=love+1 where id='$id'"; //更新数据
  mysql_query( $sql);
  $sql_in = "insert into pic_ip (pic_id,ip) values ('$id','$ip')"; //写入数据
  mysql_query( $sql_in);
  $result = mysql_query("select love from pic where id='$id'");
  $row = mysql_fetch_array($result);
  $love = $row['love']; //获取赞数值
  echo $love;
}else{
  echo "赞过了..";
}

In der Datenbank SQL im Anhang, den ich hochgeladen habe, können Sie direkt eine Testdatenbank mit UTF8-Codierung erstellen und dann die SQL-Datei darin importieren. Ändern Sie einfach die Datenbankverbindungsinformationen in connect.php.

Klicken Sie hier, um die Quelldatei herunterzuladen.

Zusammenfassung:

Tatsächlich bedeutet es, eine Ajax-Anfrage zu senden, beispielsweise wenn Sie ein Produkt mögen möchten. Die Produkttabelle muss über ein Zählfeld verfügen. Sie senden eine Anfrage und fügen diesem Feld 1 hinzu

Bei Erfolg wird die aktuelle Nummer zurückgegeben. Ändern Sie dann die Seite in

function Zan( goodsId, a ){
  $.post( "/goods/zan/"+goodsId, null,function( ret ){
     if( ret.status == 'ok' )
      $(a).html( ret.zannum);
     else
      alert( ret.data );
  },'json' );
}

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

Verwandte Empfehlungen:

Zusammenfassung der Verwendung der OpenSSL-Verschlüsselungserweiterung von PHP

Basierend auf einer ausführlichen Erläuterung der PHP-Implementierung von 301 Redirect Jump-Beispielen

Analyse von einfangenden Gruppen und nicht einfangenden Gruppen in regulären PHP-Ausdrücken

Das obige ist der detaillierte Inhalt vonPHP kombiniert die Ajax-Non-Refresh-Übermittlung von jQuery, um die Like-Funktion zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!