recherche

Maison >développement back-end >tutoriel php >Implémentation d'une fonction de notation basée sur jQuery via PHP et mysql

Implémentation d'une fonction de notation basée sur jQuery via PHP et mysql

墨辰丷
墨辰丷original
2018-06-07 09:46:101459parcourir

Cet article présente principalement l'implémentation d'une fonction de notation basée sur jQuery via PHP et mysql. 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 tableaux. Le tableau pic enregistre les informations sur l'image, y compris le nom, le chemin et le nombre total de "j'aime" de l'image, et pic_ip. 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.phpDans 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 l'affichage de la page effet.
Le code est le suivant

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="jquery">
<meta name="description" content="">
<title>jQuery+Ajax+PHP实现"喜欢"评级</title>
<link rel="stylesheet" type="text/css" href="../css/main.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("p a").click(function(){
var love = $(this);
var id = love.attr("rel");
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;
});
});
</script>
<style type="text/css">
.clear{clear:both}
.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}
</style>
</head>
<body>
<p id="main">
<ul class="list">
<?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 }?>
</ul>
</p>
</body>
</html>

En CSS, nous allons définir l'effet dynamique du glissement de la souris vers et loin du bouton coeur rouge, et positionner le bouton. Le code est le suivant

.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 jQueryLorsque l'utilisateur clique sur le bouton coeur rouge de la photo qu'il aime, une requête ajax est envoyée en arrière-plan love.php . Une fois la réponse à la demande réussie, mettez à jour la valeur d'origine.
Le code est le suivant

$(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
Backend love.php reçoit la requête ajax du front-end et en fonction de la valeur de l'identifiant de l'image soumise , trouve s'il est déjà dans la table IP S'il y a un enregistrement de clic de l'IP de l'utilisateur, il indiquera à l'utilisateur qu'il a été « aimé ». Sinon, effectuez les opérations suivantes :
1. Mettez à jour l'image correspondante. valeur du champ d'amour dans la table d'image 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 d'amour mise à jour, qui correspond au nombre total d'utilisateurs qui aiment l'image, et affichez le total sur la page frontale.
Le code est le suivant 

<?php
$host="localhost";
$db_user="root";
$db_pass="";
$db_name="demo";
$timezone="Asia/Shanghai";
$link=mysql_connect($host,$db_user,$db_pass);
mysql_select_db($db_name,$link);
mysql_query("SET names UTF8");
?>
 
 
<?php
include_once("connect.php");
$ip = get_client_ip();
$id = $_POST[&#39;id&#39;];
if(!isset($id) || empty($id)) exit;
$ip_sql=mysql_query("select ip from pic_ip where pic_id=&#39;$id&#39; and ip=&#39;$ip&#39;");
$count=mysql_num_rows($ip_sql);
if($count==0){
$sql = "update pic set love=love+1 where id=&#39;$id&#39;";
mysql_query( $sql);
$sql_in = "insert into pic_ip (pic_id,ip) values (&#39;$id&#39;,&#39;$ip&#39;)";
mysql_query( $sql_in);
$result = mysql_query("select love from pic where id=&#39;$id&#39;");
$row = mysql_fetch_array($result);
$love = $row[&#39;love&#39;];
echo $love;
}else{
echo "喜欢过了..";
}
//获取用户真实IP
function get_client_ip() {
if (getenv("HTTP_CLIENT_IP") && strcasecmp(getenv("HTTP_CLIENT_IP"), "unknown"))
$ip = getenv("HTTP_CLIENT_IP");
else
if (getenv("HTTP_X_FORWARDED_FOR") && strcasecmp(getenv("HTTP_X_FORWARDED_FOR"), "unknown"))
$ip = getenv("HTTP_X_FORWARDED_FOR");
else
if (getenv("REMOTE_ADDR") && strcasecmp(getenv("REMOTE_ADDR"), "unknown"))
$ip = getenv("REMOTE_ADDR");
else
if (isset ($_SERVER[&#39;REMOTE_ADDR&#39;]) && $_SERVER[&#39;REMOTE_ADDR&#39;] && strcasecmp($_SERVER[&#39;REMOTE_ADDR&#39;], "unknown"))
$ip = $_SERVER[&#39;REMOTE_ADDR&#39;];
else
$ip = "unknown";
return ($ip);
}
?>

La fonction get_client_ip() dans le code est utilisée pour obtenir la véritable adresse IP de l'utilisateur.

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 :

PHP empêche les attaques de sites Web en interdisant les accès IP fréquents

PHP+Mysql +Query et sélection de zone de liste implémentée par jQuery

php implémente le formatage des nombres, fonction fonctionnelle consistant à ajouter des virgules tous les trois chiffres du nombre

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment accéder à la file d'attente de messages RabbitMQ en utilisant PHPArticle suivant：Comment accéder à la file d'attente de messages RabbitMQ en utilisant PHP

Articles Liés

Voir plus