Apprenez à obtenir des effets similaires avec php+jQuery+Ajax

L'exemple de cet article décrit la méthode php+jQuery+Ajax pour obtenir le même effet. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Conception de la base de données

Préparez d'abord deux tableaux. Le tableau d'images enregistre les informations sur l'image, y compris le nom de. l'image, le chemin et le nombre total de "j'aime" de l'image, pic_ip enregistre les données IP après que l'utilisateur a cliqué sur J'aime.

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

Dans index.php, nous lisons les informations de l'image dans la table pic via PHP et les affichons, combinées avec CSS, pour améliorer la page effet d'affichage. En

<?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, nous allons définir l'effet dynamique du glissement de la souris vers et loin du bouton coeur rouge, et positionner le bouton.

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

code jQuery

Lorsque l'utilisateur clique sur le bouton coeur rouge de l'image qu'il aime, une requête ajax est envoyée en arrière-plan love.php après la requête. la réponse est réussie, l'original Quelques valeurs

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

L'arrière-plan love.php reçoit la requête ajax du front-end, et en fonction du valeur d'identification de l'image soumise, détermine si la table IP contient déjà l'adresse IP de l'utilisateur. S'il existe un enregistrement de clic de l'adresse IP de l'utilisateur, il indiquera à l'utilisateur qu'elle a été "aimée". Sinon, effectuez les opérations suivantes :

. 1. Mettez à jour la valeur du champ d'amour de l'image correspondante dans la table d'images et ajoutez 1 à la valeur.
2. Écrivez les informations IP de l'utilisateur dans la table pic_ip pour empêcher les utilisateurs de cliquer à plusieurs reprises.
3. Obtenez la valeur J'aime mise à jour, qui correspond au nombre total d'utilisateurs qui aiment l'image, et affichez le total sur la page frontale.

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 "赞过了..";
}

Dans la base de données SQL dans la pièce jointe que j'ai téléchargée, vous pouvez directement créer une base de données de test avec encodage UTF8, puis y importer le fichier SQL. Modifiez simplement les informations de connexion à la base de données dans connect.php.

Cliquez ici pour télécharger le fichier source.

Résumé :

En fait, cela signifie envoyer une requête ajax, par exemple, vous souhaitez aimer un produit. La table des produits doit avoir un champ de nombre. Vous envoyez une demande et ajoutez 1 à ce champ

En cas de succès, le numéro actuel sera renvoyé. Changez ensuite de page pour devenir

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

Recommandations d'apprentissage associées : programmation php (vidéo)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!