新浦京娱乐场官网-301net-新浦京娱乐www.301net
做最好的网站

实例中需要两个表

当我们浏览网页时,我们想对网页内容如作品、商量中的观点持赞同或反对意见时,可以经过点击网页中的“顶”和“踩”来拓展投票。而全部交互进程,开辟者能够因而ajax异步来达成,进而升高用户体验。

本文结合实例,疏解使用PHP MySql jQuery实现的“顶”和“踩”投票功能,通过记录用户IP,判别用户的投票行为是或不是有效,该实例也足以扩充到投票系统中。要是你具备PHP、MySql和jQuery相关基础知识,那么请继续往下阅读。

准备

笔者们先要希图为全部实例运转所需的mysql数据表,实例中必要多个表,votes表用来记录对应小说或臧否的用户投票的数量,而且我们暗中认可写入一条id为1的数目以便演示,votes_ip表用来记录用户每回投票的IP,程序根据用户IP决定投票是或不是行得通。

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, 
 `vid` int(10) NOT NULL, 
 `ip` varchar(40) NOT NULL 
) ENGINE=MyISAM DEFAULT CHARSET=utf8; 

HTML

在页面中,有七个分别表示“顶”和“踩”的开关,即#dig_up和#dig_down,按钮上记录了投票的票的数量以及个别所占的比例,非常直观的对照投票结果。

<div class="digg"> 
  <div id="dig_up" class="digup"> 

    <p>很好,很强大!</p> 
    <div id="bar_up" class="bar"><i></i></div> 
  </div> 
    <div id="dig_down" class="digdown"> 

    <p>太差劲了!</p> 
    <div id="bar_down" class="bar"><i></i></div> 
  </div> 
  <div id="msg"></div> 
</div> 

CSS

咱俩亟须使用CSS来标榜页面,大家使用一张图diggs.png来恒定差别的按键背景,通过设置position来稳固各因素之间的岗位关系。

.digg{width:420px; height:120px; margin:80px auto 20px auto; position:relative} 
#dig_up,#dig_down{width:200px; height:48px; margin:10px; position:relative; 
border:1px solid #d3d3d3; padding-left:42px; cursor:pointer} 
.digup{background:url(diggs.png) no-repeat 4px 2px;} 
.digup_on{background:url(diggs.png) no-repeat 4px -49px;} 
.digdown{background:url(diggs.png) no-repeat 4px -102px;} 
.digdown_on{background:url(diggs.png) no-repeat 4px -154px;} 
#num_up,#num_down{position:absolute; right:6px; top:18px; font-size:20px;} 
#dig_up p{height:24px; line-height:24px; color:#360} 
#dig_down p{height:24px; line-height:24px; color:#f30} 
.bar{width:100px; height:12px; line-height:12px; border:1px solid #f0f0f0; 
position:relative; text-align:center} 
.bar span{display:block; height:12px; } 
.bar i{position:absolute; top:0; left:104px;} 
#bar_up span{background:#360} 
#bar_down span{background:#f60} 
#msg{position:absolute; right:20px; top:40px; font-size:18px; color:#f00} 

jQuery

本示例还依附于jQuery,由此一定不可能忘了在页面中先载入jquery库文件。

率先,jQuery要拍卖的是鼠标分别滑向多个投票开关时转换的背景图片,通过addClass()和removeClass()来落到实处。

$(function(){ 
  //鼠标滑向和离开投票按钮时,变换背景样式 
  $("#dig_up").hover(function(){ 
    $(this).addClass("digup_on"); 
  },function(){ 
    $(this).removeClass("digup_on"); 
  }); 
  $("#dig_down").hover(function(){ 
    $(this).addClass("digdown_on"); 
  },function(){ 
    $(this).removeClass("digdown_on"); 
  }); 

  //初始化数据 
  getdata("do.php",1); 

  //单击“顶”时 
  $("#dig_up").click(function(){ 
    getdata("do.php?action=like",1); 
  }); 
  //单击“踩”时 
  $("#dig_down").click(function(){ 
    getdata("do.php?action=unlike",1); 
  }); 
}); 

下一场,大家起始化数据,正是页面加载后,要突显早先的早就投票的结果,富含各投票的数量和所占比重。我们将获取数据的操作写在三个自定义函数getdata()中,通过传递区别的呼吁地址和id参数来成功多少的载入。函数getdata()中,向U路虎极光L发送一个ajax央浼,依照后台管理的归来结果,倘使投票成功则变动页面中相应的要素内容,包蕴投票的数量和所占比重。

function getdata(url,sid){ 
  $.getJSON(url,{id:sid},function(data){ 
    if(data.success==1){//投票成功 
      $("#num_up").html(data.like); 
      //通过控制宽度来显示百分比进度条效果 
      $("#bar_up span").css("width",data.like_percent); 
      $("#bar_up i").html(data.like_percent); 
      $("#num_down").html(data.unlike); 
      $("#bar_down span").css("width",data.unlike_percent); 
      $("#bar_down i").html(data.unlike_percent); 
    }else{//投票失败 
      $("#msg").html(data.msg).show().css({'opacity':1,'top':'40px'}) 
      .animate({top:'-50px',opacity:0}, "slow"); 
    } 
  }); 
} 

PHP

数据的获得都以通过do.php来产生,do.php遵照前端页面传递的参数,连接数据库,依照法则判别分别步入“顶”、“踩”和始发数据处理模块,以下是do.php模块代码结构:

include_once("connect.php");//连接数据库 

$action = $_GET['action']; 
$id = 1; 
$ip = get_client_ip();//获取ip 

if($action=='like'){//顶 
  likes(1,$id,$ip); 
}elseif($action=='unlike'){//踩 
  likes(0,$id,$ip); 
}else{ 
  echo jsons($id); 
} 

函数likes()用来拍卖“顶”和“踩”投票模块,首先是推断用户IP是或不是业已投票过了,假设已经投票则一向回到相应提醒,要是用户IP未有投票记录则更新votes表,将相应的投票的数量加1,然后向votes_ip表中插入该用户的IP记录,假如操作成功,则调用jsons()输出投票后的投票的数量和所占比例等数据,不然输入操作退步的提醒音讯。

function likes($type,$id,$ip){ 
  $ip_sql=mysql_query("select ip from votes_ip where vid='$id' and ip='$ip'"); 
  $count=mysql_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; 
    } 
    mysql_query($sql); 

    $sql_in = "insert into votes_ip (vid,ip) values ('$id','$ip')"; 
    mysql_query($sql_in); 

    if(mysql_insert_id()>0){ 
      echo jsons($id); 
    }else{ 
      $arr['success'] = 0; 
      $arr['msg'] = '操作失败,请重试'; 
      echo json_encode($arr); 
    } 
  }else{ 
    $msg = $type==1?'您已经顶过了':'您已经踩过了'; 
    $arr['success'] = 0; 
    $arr['msg'] = $msg; 
    echo json_encode($arr); 
  } 
} 

函数jsons()用来读取votes表中相应id的投票的数量,并总计比例,最后将那个新闻以json格式输出,供前端页面使用。

function jsons($id){ 
  $query = mysql_query("select * from votes where id=".$id); 
  $row = mysql_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); 
} 

该实例能够行使到常见的"赞"、同意和反对商量、投票系统等景况中,运用了Ajax原理完成的内外端交互成效。do.php中还也可能有个函数get_client_ip()用来赢得用户实际IP,那么些函数从前我有成文也发过,已打包在代码中接待下载,在此不贴出来了。

如上所述正是本文的全体内容了,希望大家能够喜欢。

您大概感兴趣的稿子:

  • 听新闻说jquery达成ajax无刷新批评
  • C#利用jQuery完成无刷新斟酌提交的措施
  • Asp.net利用JQuery AJAX达成无刷新批评思路与代码
  • jquery 和讯新浪的评头品足块制作
  • jquery达成仿和讯和讯争持滚动作效果应
  • JQuery完成动态增进删减商酌的章程
  • jQuery 达成批评等第好评差评特效
  • jQuery完结页面批评栏中访客新闻自动填写功效的法子
  • 行使jQuery达成WordPress中@的ID悬浮展现研商内容
  • jQuery完结的简单无刷新商酌功用示例

本文由新浦京娱乐场官网-301net-新浦京娱乐www.301net发布于301net网站建设,转载请注明出处:实例中需要两个表

您可能还会对下面的文章感兴趣: