Erfahren Sie, wie Sie mit PHP+jQuery+Ajax ähnliche Effekte erzielen

Das Beispiel in diesem Artikel beschreibt die Methode zur Verwendung von PHP + JQuery + Ajax, um den ähnlichen Effekt zu erzielen. Teilen Sie es als Referenz mit allen:

Datenbankdesign

Bereiten Sie zunächst zwei Tabellen vor. In der Bildtabelle werden Bildinformationen gespeichert, einschließlich Name, Pfad und Gesamtzahl der „Likes“ des entsprechenden Bildes zum Bild. pic_ip zeichnet die IP-Daten des Benutzers auf, nachdem er auf „Gefällt mir“ geklickt hat.

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 den Seitenanzeigeeffekt zu verbessern. In

<?php
	 include_once("connect.php");
	 $sql = mysqli_query($link,"select * from pic");
	 while($row=mysqli_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 dieser 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}

jAbfragecode

Wenn der Benutzer auf dem Bild, das ihm gefällt, auf die rote Herzschaltfläche klickt, wird eine Ajax-Anfrage an den Hintergrund love.php gesendet. Nachdem die Anfrageantwort erfolgreich war, wird der ursprüngliche Wert aktualisiert

$(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 durchsucht die IP-Tabelle anhand des übermittelten Bild-ID-Werts, um festzustellen, ob ein Klickdatensatz der IP des Benutzers vorhanden ist , teilt es dem Benutzer mit, dass es ihm „gefällt“ hat. Andernfalls führen Sie die folgenden Vorgänge aus:

1 Aktualisieren Sie den entsprechenden Bildliebesfeldwert 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();
$id = $_POST['id'];
if(!isset($id) || empty($id)) exit;

$ip_sql=mysqli_query($link,"select ip from pic_ip where pic_id='$id' and ip='$ip'");
$count=mysqli_num_rows($ip_sql);
if($count==0){
	$sql = "update pic set love=love+1 where id='$id'";
	mysqli_query($link,$sql);
	$sql_in = "insert into pic_ip (pic_id,ip) values ('$id','$ip')";
	mysqli_query($link,$sql_in);
	$result = mysqli_query($link,"select love from pic where id='$id'");
	$row = mysqli_fetch_array($result);
	$love = $row['love'];
	echo $love;
}else{
	echo "赞过了..";
}

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

Quelldatei klicken Sie hier, um sie von dieser Website herunterzuladen.

Zusammenfassung:

sendet tatsächlich eine Ajax-Anfrage, zum Beispiel möchten Sie ein Produkt mögen. Die Produkttabelle muss über ein Zählfeld verfügen. Sie senden eine Anfrage an +1 für dieses Feld. Wenn dies erfolgreich ist, wird die aktuelle Nummer zurückgegeben. Dann wechseln Sie die Seite und es wird

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

Verwandte Lernempfehlungen:

php-Programmierung

(Video)

Das obige ist der detaillierte Inhalt vonErfahren Sie, wie Sie mit PHP+jQuery+Ajax ähnliche Effekte erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!