suchen
HeimBackend-EntwicklungPHP-TutorialjQuery+Ajax+PHP“喜欢”评级功能实现代码_PHP

本文章来给大家介绍一个jQuery+Ajax+PHP实现“喜欢”评级功能代码,用户点击页面中自己喜欢的图片上的红心按钮时,前端页面向后台发送一个ajax请求,后台PHP程序接收请求后,查询IP库中是否已经有该用户的点击记录,如果没有,则将对应的数值+1,同时将该用户IP信息写入IP库,反之则告诉用户已经“喜欢过了”。

数据库设计
先准备两张表,pic表保存的是图片信息,包括图片对应的名称、路径以及图片“喜欢”总数,pic_ip则记录用户点击喜欢后的IP数据。

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
在index.php中,我们通过PHP读取pic表中的图片信息并展示出来,结合CSS,提升页面展示效果。
代码如下

<!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>
<div id="main">
<ul class="list">
<&#63;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'];
&#63;>
<li><img  src="images/<&#63;php echo $pic_url;&#63; alt="jQuery+Ajax+PHP“喜欢”评级功能实现代码_PHP" >" alt="<&#63;php echo $pic_name;&#63;>"><p><a href="#" title="我喜欢" class="img_on" rel="<&#63;php echo $pic_id;&#63;>"><&#63;php echo $love;&#63;></a></p></li>
<&#63;php }&#63;>
</ul>
</div>
</body>
</html>

CSS中,我们将定义鼠标滑向和离开红心按钮的动态效果,并定位按钮的位置。
代码如下

.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代码
当用户点击自己喜欢的图片上的红心按钮时,向后台love.php发送ajax请求,请求响应成功后,更新原有的数值。
代码如下

$(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
后台love.php接收前端的ajax请求,根据提交的图片id值,查找IP表中是否已有该用户ip的点击记录,如果有则告诉用户已“喜欢过了”,反之,则进行一下操作:
1、更新图片表中对应的图片love字段值,将数值加1。
2、将该用户IP信息写入到pic_ip表中,用以防止用户重复点击。
3、获取更新后的love值,即喜欢该图片的用户总数,并将该总数输出给前端页面。
代码如下 

<&#63;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");
&#63;>
 
 
<&#63;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);
}
&#63;>

代码中get_client_ip()函数是用来获取用户的真实IP。

以上就是关于php 实现“喜欢”评级功能的各个关键代码,希望大家仔细研究,从中有所收获。

Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Wann würden Sie ein Merkmal gegenüber einer abstrakten Klasse oder Schnittstelle in PHP verwenden?Wann würden Sie ein Merkmal gegenüber einer abstrakten Klasse oder Schnittstelle in PHP verwenden?Apr 10, 2025 am 09:39 AM

In PHP eignet sich das Merkmal für Situationen, in denen die Wiederverwendung von Methoden erforderlich ist, aber nicht zur Erbschaft geeignet ist. 1) Das Merkmal ermöglicht Multiplexing -Methoden in Klassen, um die Komplexität mehrerer Vererbungskomplexität zu vermeiden. 2) Bei Verwendung von Merkmalen müssen Sie auf Methodenkonflikte achten, die durch die Alternative und als Schlüsselwörter gelöst werden können. 3) Überbeanspruchte des Merkmals sollte vermieden werden und seine einzelne Verantwortung sollte beibehalten werden, um die Leistung zu optimieren und die Code -Wartbarkeit zu verbessern.

Was ist ein Abhängigkeitsinjektionsbehälter (DIC) und warum eine in PHP verwenden?Was ist ein Abhängigkeitsinjektionsbehälter (DIC) und warum eine in PHP verwenden?Apr 10, 2025 am 09:38 AM

Abhängigkeitsinjektionsbehälter (DIC) ist ein Tool, das Objektabhängigkeiten für die Verwendung in PHP -Projekten verwaltet und bereitstellt. Die Hauptvorteile von DIC sind: 1. Entkopplung, Machen von Komponenten unabhängig, und der Code ist leicht zu warten und zu testen; 2. Flexibilität, leicht zu ersetzen oder zu ändern; 3.. Testbarkeit, bequem für die Injektion von Scheinobjekten für Unit -Tests.

Erklären Sie die SPLFixedArray und seine Leistungseigenschaften im Vergleich zu regulären PHP -Arrays.Erklären Sie die SPLFixedArray und seine Leistungseigenschaften im Vergleich zu regulären PHP -Arrays.Apr 10, 2025 am 09:37 AM

SplfixedArray ist ein Array mit fester Größe in PHP, das für Szenarien geeignet ist, in denen hohe Leistung und geringe Speicherverbrauch erforderlich sind. 1) Es muss die Größe beim Erstellen angeben, um den durch dynamischen Einstellungen verursachten Overhead zu vermeiden. 2) Basierend auf C -Spracharray betreibt direkt Speicher und schnelle Zugriffsgeschwindigkeit. 3) Geeignet für eine großräumige Datenverarbeitung und speicherempfindliche Umgebungen, muss jedoch mit Vorsicht verwendet werden, da seine Größe festgelegt ist.

Wie kann PHP -Datei sicher sicher hochladen?Wie kann PHP -Datei sicher sicher hochladen?Apr 10, 2025 am 09:37 AM

PHP überlädt Datei -Hochladen über die Variable $ \ _ Dateien. Zu den Methoden zur Sicherstellung gehören: 1. Upload -Fehler, 2. Dateityp und -größe überprüfen, 3.. Dateiüberschreibung verhindern, 4. Verschieben von Dateien auf einen dauerhaften Speicherort.

Was ist der Null -Koalescing -Operator (??) und der Null -Koalescing -Zuweisungsoperator (?? =)?Was ist der Null -Koalescing -Operator (??) und der Null -Koalescing -Zuweisungsoperator (?? =)?Apr 10, 2025 am 09:33 AM

In JavaScript können Sie NullCoalescingoperator (??) und NullCoalescingAssignmentoperator (?? =) verwenden. 1.??? 2.??= Weisen Sie den Wert des rechten Operanden die Variable zu, jedoch nur, wenn die Variable null oder undefiniert ist. Diese Operatoren vereinfachen die Codelogik und verbessern die Lesbarkeit und Leistung.

Was ist CSP -Header (Content Security Policy Ricture) und warum ist es wichtig?Was ist CSP -Header (Content Security Policy Ricture) und warum ist es wichtig?Apr 09, 2025 am 12:10 AM

CSP ist wichtig, da es XSS -Angriffe verhindern und das Laden der Ressourcen begrenzen und die Sicherheit der Website verbessern kann. 1.CSP ist Teil von HTTP -Reaktionsüberschriften und begrenzt böswilliges Verhalten durch strenge Richtlinien. 2. Die grundlegende Verwendung besteht darin, nur Laderessourcen aus demselben Ursprung zuzulassen. 3. Erweiterte Verwendung kann mehr feinkörnige Strategien festlegen, z. V.

Was sind HTTP -Anforderungsmethoden (erhalten, posten, setzen, löschen usw.) und wann sollte jeder verwendet werden?Was sind HTTP -Anforderungsmethoden (erhalten, posten, setzen, löschen usw.) und wann sollte jeder verwendet werden?Apr 09, 2025 am 12:09 AM

Zu den HTTP -Anforderungsmethoden gehören GET, Post, Put und Löschen, mit denen Ressourcen erhalten, übermittelt, aktualisiert und gelöscht werden. 1. Die GET -Methode wird verwendet, um Ressourcen zu erhalten, und eignet sich für Lesevorgänge. 2. Die Post -Methode wird verwendet, um Daten zu übermitteln und häufig neue Ressourcen zu erstellen. 3. Die Put -Methode wird zum Aktualisieren von Ressourcen verwendet und eignet sich für vollständige Updates. V.

Was ist HTTPS und warum ist es für Webanwendungen von entscheidender Bedeutung?Was ist HTTPS und warum ist es für Webanwendungen von entscheidender Bedeutung?Apr 09, 2025 am 12:08 AM

HTTPS ist ein Protokoll, das auf der Grundlage von HTTP eine Sicherheitsschicht hinzufügt, die hauptsächlich die Privatsphäre und die Datensicherheit der Benutzer durch verschlüsselte Daten schützt. Zu den Arbeitsprinzipien gehören TLS -Handshake, Zertifikatüberprüfung und verschlüsselte Kommunikation. Bei der Implementierung von HTTPS müssen Sie auf Zertifikatverwaltung, Leistungsauswirkungen und Mischinhalteprobleme achten.

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Herunterladen der Mac-Version des Atom-Editors

Herunterladen der Mac-Version des Atom-Editors

Der beliebteste Open-Source-Editor

SAP NetWeaver Server-Adapter für Eclipse

SAP NetWeaver Server-Adapter für Eclipse

Integrieren Sie Eclipse mit dem SAP NetWeaver-Anwendungsserver.

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

SecLists

SecLists

SecLists ist der ultimative Begleiter für Sicherheitstester. Dabei handelt es sich um eine Sammlung verschiedener Arten von Listen, die häufig bei Sicherheitsbewertungen verwendet werden, an einem Ort. SecLists trägt dazu bei, Sicherheitstests effizienter und produktiver zu gestalten, indem es bequem alle Listen bereitstellt, die ein Sicherheitstester benötigen könnte. Zu den Listentypen gehören Benutzernamen, Passwörter, URLs, Fuzzing-Payloads, Muster für vertrauliche Daten, Web-Shells und mehr. Der Tester kann dieses Repository einfach auf einen neuen Testcomputer übertragen und hat dann Zugriff auf alle Arten von Listen, die er benötigt.

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen