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

最近因工作上的需求,需要实现一个统计每天某个超链接点击次数的功能,经过考虑,我觉得用php+mysql还是挺容易实现的,过程很简单,就是通过点击超链接,触发表单提交,完成一次数据库的+1输入,不过值得注意的是,再点击触发表单的时候,要防止页面的刷新,所以,这里需要的一个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内的代码灵活嵌入到需要的网页当中,即可。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,270评论 25 709
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,359评论 19 139
  • 最好的作者。——最好的作者是那羞于成为作家的人。 治理作家的苛法。——应当把作家看作罪犯,只有在极罕见的场合才有言...
    月上流云阅读 4,369评论 0 0
  • 话说是无奈其实只是我害怕自己一个人出行,一个人看着窗外,让我觉得人生就像电视里演的那样,匆匆过客,所有的,除了父母...
    笔墨丹青阅读 1,709评论 0 0
  • 一直觉得“梦”是个很奇妙的东西,在梦里可以梦到各种各样无厘头的事,也可以有各种各样的奇思妙想,清醒的时候想不到的i...
    一只鱼shilling阅读 994评论 0 1