Heim > Artikel > Backend-Entwicklung > Implementierung einer Bewertungsfunktion basierend auf jQuery über PHP und MySQL
Implementierung einer Bewertungsfunktion basierend auf jQuery über PHP und MySQL
- 墨辰丷Original
- 2018-06-07 09:46:101365Durchsuche
Dieser Artikel stellt hauptsächlich die Implementierung einer auf jQuery basierenden Bewertungsfunktion über PHP und MySQL vor. Ich hoffe, dass er für alle hilfreich ist.
Datenbankdesign
Bereiten Sie zunächst zwei Tabellen vor. In der Bildtabelle werden Bildinformationen gespeichert, einschließlich Name, Pfad und Gesamtzahl der „Likes“ des Bildes sowie pic_ip Erfassen Sie die IP-Daten, nachdem der Benutzer 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.phpIn index.php lesen wir die Bildinformationen in der Bildtabelle über PHP und zeigen sie in Kombination mit CSS an, um den Seitenanzeigeeffekt zu verbessern.
Der Code lautet wie folgt
<!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['id'];
$pic_name = $row['pic_name'];
$pic_url = $row['pic_url'];
$love = $row['love'];
?>
<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>In CSS definieren wir den dynamischen Effekt, wenn die Maus auf die rote Herzschaltfläche zu und von ihr weg gleitet, und positionieren die Schaltfläche. Der Code lautet wie folgt
.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}jQuery-CodeWenn der Benutzer auf dem Bild, das ihm gefällt, auf die rote Herzschaltfläche klickt, wird eine Ajax-Anfrage an den Hintergrund gesendet Die Anforderungsantwort ist erfolgreich, der ursprüngliche Wert wird aktualisiert.
Der Code lautet wie folgt
$(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 empfängt die Ajax-Anfrage vom Frontend und findet sie basierend auf dem übermittelten Bild-ID-Wert ob der Benutzer bereits in der IP-Tabelle vorhanden ist. Wenn ein Klickdatensatz der IP vorhanden ist, wird dem Benutzer mitgeteilt, dass er „geliked“ wurde. Andernfalls führen Sie die folgenden Vorgänge aus:
1. Aktualisieren Sie das entsprechende Bildliebesfeld Geben Sie den Wert in der Bildtabelle ein 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. Holen Sie sich den aktualisierten Liebeswert, also die Gesamtzahl der Benutzer, denen das Bild gefällt, und geben Sie die Gesamtzahl auf der Startseite aus.
Der Code lautet wie folgt:
<?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['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 "喜欢过了..";
}
//获取用户真实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['REMOTE_ADDR']) && $_SERVER['REMOTE_ADDR'] && strcasecmp($_SERVER['REMOTE_ADDR'], "unknown"))
$ip = $_SERVER['REMOTE_ADDR'];
else
$ip = "unknown";
return ($ip);
}
?>Die Funktion get_client_ip() im Code wird verwendet, um die echte IP des Benutzers zu erhalten.
Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird.
Verwandte Empfehlungen:
PHP verhindert Website-Angriffe, indem es häufige IP-Zugriffe verbietet
PHP+Mysql +Query und Listenfeldauswahl, implementiert durch jQuery
Das obige ist der detaillierte Inhalt vonImplementierung einer Bewertungsfunktion basierend auf jQuery über PHP und MySQL. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!