神刀安全网

按钮点击数统计计数器(PHP+MYSQL+JS)

最近因工作上的需求,需要实现一个统计每天某个超链接点击次数的功能,经过考虑,我觉得用php+mysql还是挺容易实现的,过程很简单,就是通过点击超链接,触发表单提交,完成一次数据库的+1输入,不过值得注意的是,再点击触发表单的时候,要防止页面的刷新,所以,这里需要的一个js的技巧,来控制表单的提交,好了,闲话不多说,马上奉上具体的技术细节。

一、思路

该功能的实现,逻辑上还是非常简单的,上一个流程图,一目了然。

按钮点击数统计计数器(PHP+MYSQL+JS)
流程图

二、功能实现

为更灵活应用在网站上,根据功能分成了四个功能页面,分别为提交页面index.php,公共页面con.php,功能处理页面sub.php,显示数据页面show.php,下面依次来看下。

1.公共页面con.php

该页面主要连接数据库,供其他页面调用,代码如下:

<?php @mysql_connect("localhost:3306","user","password") or die("数据库连接失败"); @mysql_select_db("click") or die("数据表连接失败"); mysql_query("set names 'gbk'"); ?>

此连接数据库的方式为最原始直接的,未考虑SQL注入等安全风险。

2.提交页面index.php

为页面主要呈现终端用户,采集点击数据,代码如下:

<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>    //调用jquery库 <script language="javascript" type="text/javascript">    $(document).ready(function() {   //使用jQuery异步提交表单,实现表单提交不刷新   $('#form1').submit(function() {     jQuery.ajax({     url: 'sub.php',     data: $('#form1').serialize(),     type: "POST",     beforeSend: function()     {     //在异步提交前要做的操作     },     success: function()     {      }     });     return false;     });   });    function clickNum(){            //js控制表单提交     document.getElementById('form1').submit();       }     </script>  <form action="sub.php" method="POST" id="form1" target="rfFrame"> <input type="hidden" name="hid" id="hid" value="1"> </form> <iframe style="display: none" id="rfFrame"  name="rfFrame" src="about:blank"></iframe> <button onclick="clickNum()">Click Me</button>

注解:

  • 该部分主要运用js控制表单提交,并实现表单提交不刷新,重新载入页面的现象

3.功能处理页面sub.php

该页面主要实现,在接受表单数据时,对数据库中当天日期是否已计数进行判断,若无计数,初始化创建当天日期,并计数为1;若有计数,计数+1,代码如下:

<?php include("conn.php"); if(!empty($_POST['hid'])){     $dates=date('Y-m-d');     //获取当前日期     $hit=intval($_POST['hid'].value);   //获取表单POST来的点击信息         //查询表内当前日期数据,存入关联数组$result     $sql1="select * from `lou_click` where `date`='$dates'";         $result=mysql_query($sql1);      if (!mysql_num_rows($result)) {    //如果没有记录,初始化创建当前日期对应的记录,并计数为$hit($hit已设置为1)          $sql2="insert into `lou_click` (`date`,`hits`) values ('$dates','$hit')";         mysql_query($sql2);      }else{       //若有记录,原记录加$hit($hit已设置为1)         $sql3="update `lou_click` set hits=hits+$hit where `date` ='$dates'";         mysql_query($sql3);         } } ?>

注解:

  • date()函数,用于获取当前日期
  • mysql_num_rows()函数,用于获取数据记录条数

4.显示数据页面show.php

该页面较为简单,主要用到mysql的查询语句,代码如下:

<?php  include("conn.php");  $sql="select * from `lou_click`"; $db=mysql_fetch_array(mysql_query($sql)); $query=mysql_query($sql);  while($db=mysql_fetch_array($query)){  ?>  <div class="content">     <div class="box_cell">         <span>日期:<?php echo $db['date'] ?></span>         <div>点击:<?php echo $db['hits'] ?></div>     </div> </div>  <?php  }  ?>

注解:

  • 查询语句,while循环语句调用结果

这样按钮计数器就实现了,这个可用于网站对站长具有特殊数据意义的按钮或者超链接,例如手机站电话咨询、短信发送按钮等,将index.php内的代码灵活嵌入到需要的网页当中,即可。

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » 按钮点击数统计计数器(PHP+MYSQL+JS)

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址