Implemented a rating function based on jQuery through PHP and mysql-PHP Tutorial-php.cn

Implemented a rating function based on jQuery through PHP and mysql

墨辰丷

Release： 2023-03-30 10:44:02

Original

1419 people have browsed it

This article mainly introduces the implementation of a rating function based on jQuery through PHP and mysql. Interested friends can refer to it. I hope it will be helpful to everyone.

Database Design

First prepare two tables. The pic table stores picture information, including the name, path and total number of "likes" of the picture, and pic_ip. Record the IP data after the user clicks like.

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;

Copy after login

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

Copy after login

index.phpIn index.php, we read the image information in the pic table through PHP and display it, combined with CSS, to improve the page display effect.
The code is as follows

<!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>

Copy after login

In CSS, we will define the dynamic effect of the mouse sliding towards and away from the red heart button, and position the button. The code is as follows

.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}

Copy after login

jQuery codeWhen the user clicks the red heart button on the picture he likes, an ajax request is sent to the background love.php. After the request response is successful, the original is updated. value.
The code is as follows

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

Copy after login

love.php
The background love.php receives the ajax request from the front end and checks whether the user already exists in the IP table based on the submitted image id value. If there is a click record of the IP, it will tell the user that it has been "liked". Otherwise, perform the following operations:
1. Update the corresponding picture love field value in the picture table and add 1 to the value.
2. Write the user's IP information into the pic_ip table to prevent users from clicking repeatedly.
3. Get the updated love value, which is the total number of users who like the picture, and output the total to the front-end page.
The code is as follows

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

Copy after login

The get_client_ip() function in the code is used to obtain the user’s real IP.

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study.

Related recommendations:

PHP prevents website attacks by prohibiting frequent IP access

PHP Mysql jQuery Implemented query and list box selection

php realizes number formatting, functional function of adding commas for every three digits

The above is the detailed content of Implemented a rating function based on jQuery through PHP and mysql. For more information, please follow other related articles on the PHP Chinese website!