频道栏目
首页 > 程序开发 > web前端 > JavaScript > 正文
jquery+php实现赞,踩功能
2016-05-12 09:07:51         来源:u014270740的专栏  
收藏   我要投稿

实现赞,踩功能需要的一些需求:

1.记录用户的IP,根据IP判断用户的投票行为是否有效

2.需要两张表,一张是统计赞和踩的数量的,一张是记录赞或踩过的用户IP的

3.页面加载完成需要显示的赞和踩的数据用ajax从服务端获取,以后每次点赞,点踩也是用ajax从服务端获取

html 代码 (额,因为这个主要实现的是逻辑,所以界面就很简单啦 ,嘿嘿)

这个html代码很简单,就不多说了

<input class="evaluate" id="zan" type="button" value="赞" /> <label for="like">支持数: </label><span id="like"> 0</span> <label for="like_percent">支持率: </label> <span id="like_percent">0</span><strong>%</strong></p>
<p><input class="evaluate" id="cai" type="button" value="踩" /> <label for="unlike">支持数: </label><span id="unlike"> 0</span> <label for="unlike_percent">支持率: </label> <span id="unlike_percent">0</span><strong>%</strong>

jquery代码

 

因为不管是初始化,还是后来按钮事件的ajax代码 都差不多一样,所以写在一个函数里

参数中 $id 是文章ID(这里那文章举例 ,就比如你有十篇,每篇文章都有赞和踩的功能,可以给每篇文章一个ID,然后到服务端取的就是这个文章下边的赞和踩数量了)

当投票失败的时候,会将从服务端获取的失败信息,已渐淡的动画效果显示在页面上。

 

function getdata(url,$id){ 
    $.getJSON(url,{id:$id},function(data){ 
        if(data.success==1){//投票成功 
			$('#like').html(data.like);
			$('#like_percent').html(data.like_percent);
			$('#unlike').html(data.unlike);
			$('#unlike_percent').html(data.unlike_percent); 
        }else{//投票失败 
			$("#msg").html(data.msg).show().css({'opacity':1,'top':'40px'}) 
				.animate({top:'-50px',opacity:0}, "slow");
        } 
    }); 
} 
剩下的jquery执行代码

 

 

	$(document).ready(function(){
		//这里为了测试 就把文章ID 设置为1
		$id = 1;	
		var url = "operator.php";
		//初始化
		getdata(url,$id);
			
		$('.evaluate').click(function(){		
			if($(this).is('#zan')){
				url = url + "?action=like";
			}else if($(this).is('#cai')){
				url = url + "?actiion=unlike";
			}		
			getdata(url,$id);
		});
		
	});

然后是需要的两张表,votes表用来记录对应文章或评论的用户投票数,并且我们默认写入一条id为1的数据以便演示,votes_ip表用来记录用户每次投票的IP,程序根据用户IP决定投票是否有效。votes_ip中的ID字段记录的是文章ID

 

 

CREATE TABLE IF NOT EXISTS `votes` ( 
  `id` int(10) NOT NULL AUTO_INCREMENT, 
  `likes` int(10) NOT NULL DEFAULT '0', 
  `unlikes` int(10) NOT NULL DEFAULT '0', 
  PRIMARY KEY (`id`) 
) ENGINE=MyISAM  DEFAULT CHARSET=utf8; 
 
 
INSERT INTO `votes` (`id`, `likes`, `unlikes`) VALUES 
(1, 30, 10); 
 
CREATE TABLE IF NOT EXISTS `votes_ip` ( 
  `id` int(10) NOT NULL, 
  `ip` varchar(40) NOT NULL 
) ENGINE=MyISAM DEFAULT CHARSET=utf8;


PHP代码

 

(连接数据库的那一部分代码,我没有贴出来)

 

	$evaluate = $_GET['action'];
	$id = $_GET['id'];
	$ip = get_client_ip();
	if($evaluate == 'like'){
		likes(1,$id,$ip,$db);
		
	}else if($evaluate == 'unlike'){
		likes(0,$id,$ip,$db);
	}else{
		echo jsons($id,$db); 
	}

PHP需要的函数

 

 

function likes($type,$id,$ip,$db){
	 $ip_sql=mysqli_query($db,"select ip from votes_ip where $id='$id' and ip='$ip'"); 
    $count=mysqli_num_rows($ip_sql); 
    if(count==0){
        if($type==1){
            $sql = "update votes set likes=likes+1 where id=".$id; 
        }else{
            $sql = "update votes set unlikes=unlikes+1 where id=".$id; 
        } 
        mysqli_query($db,$sql); 
         
        $sql_in = "insert into votes_ip (id,ip) values ('$id','$ip')"; 
        mysqli_query($db, $sql_in); 
       
        if(mysqli_affected_rows($db)>0){ 
            echo jsons($id,$db); 
        }else{ 
            $arr['success'] = '服务器出现异常,请稍后在试'; 
            $arr['msg'] = 'failed'; 
            echo json_encode($arr); 
        } 
    }else{ 
        $msg = $type==1?'你已经赞过了':'你已经踩过了'; 
        $arr['success'] = 0; 
        $arr['msg'] = $msg; 
        echo json_encode($arr); 
    } 
}

function jsons($id,$db){ 
    $query = mysqli_query($db, "select * from votes where id=".$id); 
    $row = mysqli_fetch_array($query); 
    $like = $row['likes']; 
    $unlike = $row['unlikes']; 
    $arr['success']=1; 
    $arr['like'] = $like; 
    $arr['unlike'] = $unlike; 
    $like_percent = round($like/($like+$unlike),3)*100; 
    $arr['like_percent'] = $like_percent; 
    $arr['unlike_percent'] = (100-$like_percent); 
     
    return json_encode($arr); 
}

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);
}
实现效果就是这个样子
\

 

点击复制链接 与好友分享!回本站首页
相关TAG标签 功能
上一篇:JavaScript学习
下一篇:JavaScript入门
相关文章
图文推荐
文章
推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站