Ajax实现对静态页面的文章访问统计功能示例


Posted in PHP onOctober 10, 2016

本文实例讲述了Ajax实现对静态页面的文章访问统计功能。分享给大家供大家参考,具体如下:

众所周知,静态页面不仅速度快,而且对seo也有一定的帮助。前些日子,写了一帖关于《在SAE平台实现WordPress页面纯静态化至KVDB》。我自己使用了一段时间后,发现提速确实很明显。但是随之而来的一个问题就是,由于文章静态化后,页面并不会经过WordPress程序的处理,这样就导致了文章的访问量统计失效。当然,有一个叫做wp-postview的插件是可以解决这个问题的,但是我不是很喜欢插件,因为会拖慢整体的速度。所以这里就给出一个解决方案,就是使用Ajax来实现统计,同样是基于SAE平台的。

定义文章访问统计类

这个其实在我前面的帖子里面已经有提到过了KVDB+TaskQueue实现高效计数器,对这个做简单修改即可。由于不经过php处理,所以就不能使用队列服务来计数。同样定义计数类,并且放到网站根目录下:

$countkey=$_GET['key'];//获取要操作的计数key
if($countkey=="") exit;
if($_GET['action']=="add"){
  $cou=new counter($countkey);
  $cou->inc();//计数key对应的值加1
}elseif($_GET['action']=="get"){
  $cou=new counter($countkey);
  echo $cou->get();
}
class counter {
  private $kvdb;
  private $key;
  public function __construct($key){
    $this->kvdb=new CKvdb();
    $this->key=$key;
  }
  public function inc(){
    $num=$this->kvdb->get($this->key)+1;
    $this->kvdb->set($this->key,$num);
    return $num;
  }
  public function dec(){
    $num=$this->kvdb->get($this->key)-1;
    $this->kvdb->set($this->key,$num);
    return $num;
  }
  public function get(){
    $num=$this->kvdb->get($this->key);
    return intval($num);
  }
}
class CKvdb //这个类封装的kvdb操作。
{
  private $db;
  function __construct(){
    $this->db=new SaeKv();
    $this->db->init();
  }
  public function set($key,$value)
  {
    $this->db->set($key,$value);
  }
  public function get($key)
  {
    return $this->db->get($key);
  }
}

添加计数代码

在你的文章内容页面,添加如下的Ajax请求代码,该代码是基于jQuery的:

var keyTemp = $('#postTemp').text();
$.get('http://localhost/counter.php',{ action:'add',key:keyTemp });
$.get('http://localhost/counter.php',{ action:'get',key:keyTemp },function(data){
    $('#view').text(data+' Views');
});

keyTemp变量就是文章的别名,即存入KVDB中的键。我把该健存到一个隐藏的div身上,然后在使用Ajax的时候去获取该div的内容。Ajax中第一个get就是去访问counter.php计数类,并且带上参数,实现访问加1. 第二个get就是取访问值了,把取到的值放到相应的地方中去。

希望本文所述对大家PHP程序设计有所帮助。

PHP 相关文章推荐
WINDOWS服务器安装多套PHP的另类解决方案
Oct 09 PHP
防止用户利用PHP代码DOS造成用光网络带宽
Mar 01 PHP
PHP随机数生成代码与使用实例分析
Apr 08 PHP
PHP时间戳与日期之间转换的实例介绍
Apr 19 PHP
php操作MongoDB基础教程(连接、新增、修改、删除、查询)
Mar 25 PHP
PHP调用VC编写的COM组件实例
Mar 29 PHP
PHP 如何获取二维数组中某个key的集合
Jun 03 PHP
php中session与cookie的比较
Jan 27 PHP
PHP抓取淘宝商品的用户晒单评论+图片+搜索商品列表实例
Apr 14 PHP
php简单获取复选框值的方法
May 11 PHP
php生成mysql的数据字典
Jul 07 PHP
基于php解决json_encode中文UNICODE转码问题
Nov 10 PHP
PhpStorm terminal无法输入命令的解决方法
Oct 09 #PHP
PHP对象链式操作实现原理分析
Oct 09 #PHP
SAE实时日志接口SDK用法示例
Oct 09 #PHP
对PHP依赖注入的理解实例分析
Oct 09 #PHP
mac下多个php版本快速切换的方法
Oct 09 #PHP
Laravel中间件实现原理详解
Oct 09 #PHP
Laravel 5.1 on SAE环境开发教程【附项目demo源码】
Oct 09 #PHP
You might like
php+mysqli数据库连接的两种方式
2015/01/28 PHP
PHP文件上传处理案例分析
2016/10/15 PHP
基于jQuery的消息提示插件之旅 DivAlert(三)
2010/04/01 Javascript
jQuery EasyUI中对表格进行编辑的实现代码
2010/06/10 Javascript
基于Jquery与WebMethod投票功能实现代码
2011/01/19 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
2012/02/03 Javascript
form.submit()不能提交表单的错误原因及解决方法
2014/10/13 Javascript
JQuery中使用on方法绑定hover事件实例
2014/12/09 Javascript
jquery日历插件datepicker用法分析
2016/01/22 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
2016/05/10 Javascript
js改变style样式和css样式的简单实例
2016/06/28 Javascript
JavaScript设计模式之单例模式详解
2017/06/09 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
2017/06/30 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
2017/09/04 Javascript
vue实现提示保存后退出的方法
2018/03/15 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
2018/06/28 Javascript
修改vue+webpack run build的路径方法
2018/09/01 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
2020/02/01 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
vue 中的 render 函数作用详解
2020/02/28 Javascript
python使用Apriori算法进行关联性解析
2017/12/21 Python
快速解决pyqt5窗体关闭后子线程不同时退出的问题
2019/06/19 Python
Python使用贪婪算法解决问题
2019/10/22 Python
np.newaxis 实现为 numpy.ndarray(多维数组)增加一个轴
2019/11/30 Python
将labelme格式数据转化为标准的coco数据集格式方式
2020/02/17 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
Html5内唤醒百度、高德APP的实现示例
2019/05/20 HTML / CSS
美国大码时尚女装购物网站:ELOQUII
2017/12/28 全球购物
SQL Server面试题
2016/10/17 面试题
工程概预算专业毕业生求职信
2013/10/04 职场文书
2014年社区工会工作总结
2014/12/18 职场文书
委托书的样本
2015/01/28 职场文书
邀请函样本
2015/02/02 职场文书
暑假打工感想
2015/08/07 职场文书
css中z-index: 0和z-index: auto的区别
2021/08/23 HTML / CSS
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
2022/04/11 Vue.js