Implémentation d'une fonction de notation basée sur jQuery via PHP et mysql-tutoriel php-php.cn

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

墨辰丷

Libérer： 2023-03-30 10:44:02

original

1484 Les gens l'ont consulté

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 &#39;0&#39;, 
 PRIMARY KEY (`id`) 
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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}

Copier après la connexion

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; 
  }); 
});

Copier après la connexion

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);
}
?>

Copier après la connexion

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!