jQuery Ajax PHP用源代码下载实现“喜欢”评级功能

本文介绍了一个jQuery ajax PHP来实现“喜欢”评级的功能。当用户点击页面上他最喜欢的图片上的红心按钮时，首页会向后台发送一个Ajax请求。后台PHP程序收到请求后，查询用户的点击记录在IP库中是否已经存在。如果不是，则对应的值为1，用户的IP信息将被写入IP库中。否则，用户将被告知他已经“喜欢上了”。

源代码下载地址：http://xiaozai.jb51.net/201509/yuanma/loveit(jb51.net)

实施程序

本文基于jQuery，通过PHP和mysql实现了一个评级函数，这是一个简单且非常好的ajax应用实例。

当用户点击页面上他最喜欢的图片上的红色按钮时，首页会向后台发送一个ajax请求。后台PHP程序收到请求后，查询用户的点击记录在IP库中是否已经存在。如果不是，则对应值为1，同时将用户的IP信息写入IP库中。否则，用户被告知他已经“喜欢上了”。

数据库设计

首先，准备两张桌子。pic表存储图片信息，包括图片对应的名称和路径以及图片的“喜欢”总数。pic_ip记录用户点击喜欢后的ip数据。

如果不存在则创建表` pic `(` id ' int(11)不为空AUTO_INCREMENT，` pic _ name ' varchar(60)不为空，` pic _ URL ` ` varchar(60)不为空，` love ' int(11)不为空DEFAULT '0 '，主键(` id `)) ENGINE=MyISAM DEFAULT CHARSET=utf8；如果不存在，则创建表` pic _ IP `(` id ' int(11)不为空AUTO_INCREMENT，` pic _ id ' int(11)不为空，` IP ' varchar(40)不为空，主键(` id `)) ENGINE=MyISAM DEFAULT CHARSET=utf8 index.php

在index.php，我们通过PHP读取pic表中的图片信息并显示出来，结合CSS来提高页面的显示效果。

？PHP include _ once(' connect . PHP ')；$sql=mysql_query('从pic中选择* ')；while($ row=MySQL _ fetch _ array($ SQL)){ $ pic _ id=$ row[' id ']；$ pic _ name=$ row[' pic _ name ']；$ pic _ URL=$ row[' pic _ URL ']；$ love=$ row[' love ']；liimg src='http:images/？php echo $ pic _ url?'alt='？php echo $ pic _ name?'我喜欢rel='？php echo $ pic _ id?'？php echo $ love？/a/p/li？php }？在CSS中，我们将定义鼠标滑向和滑离红心按钮的动态效果，并定位按钮。列表{ width:760pxmargin:20px auto}。列表li { float:left宽度width:360px高度：280 px；margin:10px位置：relative}。列出li p { position:absolutetop:0left:0宽度width:360pxheight:24px线高：24 px；背景技术： # 000；opacity:8filter:alpha(不透明度=80)；} .列出Li p a { padding-left :30 px；height:24px背景： URL(images/heart . png)no-repeat 4px-1px；color: # ffffont-weight : bold；font-size:14px}。列表Li p a : hover { background-position :4 px-25px；文本装饰： none} jquery代码。

当用户点击他最喜欢的图片上的红色按钮时，他向后台love.php发送一个ajax请求。请求成功响应后，原始值会更新。

$(function(){ $('p a ')。click(function(){ var love=$(this)；var id=love . attr(' rel ')；//对应id love . fade out(300)；//褪色效果$。ajax ({type:' post '，url:' love.php '，data:' id=' id '，cache: false，//不缓存此页面的success3360函数(数据){love.html(数据)；love . fade in(300)；//褪色效果} })；返回false});});love.php

后台的love.php接收到前端发来的ajax请求，根据提交的图片id值，找出ip表中是否有用户IP的点击记录，如果有，告诉用户“喜欢”，否则，执行如下操作：1。更新图片表中对应图片爱情字段的值，值加1。

2.将用户的IP信息写入pic_ip表，防止用户反复点击。

3.获取更新后的爱值，即喜欢图片的用户总数，并输出到首页。

include _ once(' connect。PHP’)；//连接数据库$ IP=get _ client _ IP()；//获取用户IP $ id=$ _ POST[' id ']；if(！isset($id) ||空($id))退出；$ip_sql=mysql_query('从pic_ip中选择ip，其中pic_id='$id '和IP=' $ IP ')；$ count=MySQL _ num _ rows($ IP _ SQL)；if($count==0){ //如果没有记录$sql='update pic set love=love 1，其中id=' $ id//更新数据MySQL _ query($ SQL)；$sql_in='插入pic_ip (pic_id，ip)值(' $id '，' $ IP ')'；//写入数据MySQL _ query($ SQL _ in)；$result=mysql_query('从电影中选择爱，其中id=' $ id ' ')；$ row=MySQL _ fetch _ array($ result)；$ love=$ row[' love ']；//获取爱数值echo $ love}else{ echo '喜欢过了.} 以上内容是jQuery Ajax PHP实现"喜欢"评级功能附源码下载的全部内容，希望大家喜欢。