PHP combine la soumission ajax non actualisée de jQuery pour implémenter la fonction similaire

Cet article présente principalement la soumission ajax sans actualisation de php combinée avec jQuery pour réaliser la fonction like. Les amis intéressés peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Conception de la base de données

Préparez d'abord deux tables. La table pic stocke les informations sur l'image, y compris le nom, le chemin et le nombre total de "j'aime" de l'image. Enregistrez 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 Afficher l'effet.

<?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, 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 After. la réponse à la demande est réussie, mettez à jour la valeur d'origine

$(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 recherche le Table IP en fonction de la valeur de l'identifiant de l'image soumise. S'il existe un enregistrement de clic de l'IP de l'utilisateur. Si tel est le cas, il indiquera à l'utilisateur qu'il a été « aimé ». 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 modifiez la valeur Ajouter 1.
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(); //获取用户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 "赞过了..";
}

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 codée en 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 la 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' );
}

Résumé  : Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun.

Recommandations associées :

Résumé de l'utilisation de l'extension de chiffrement openssl de PHP

Basé sur une explication détaillée de l'implémentation PHP de 301 exemples de sauts de redirection

Analyse des groupes de capture et des groupes de non-capture dans les expressions régulières PHP

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!