网页前端知识汇总（七）—— 巧用JQuery+Ajax实时显示统计网站文章数据量

数据统计在网站后端和前端还是比较常见的，常见统计的数据有访问量，阅读量，下载量等，今天我主要讲后端应用比较多的，就是某个栏目的数据总数量。

 

有的人可能说了，这个讲没有意思，就是用PHP程序或者ASP程序都可以直接count出数据，没有必要用jQuery，但是我说的不是数据管理模板里面的，是总盘显示的，是实时显示，避免有数据更新时显示盘看不到情况，下面看效果

 我程序统计的是某个栏目文章数据总数量

第一步，我们先简单写个HTML

<div class="article_count">文章总数：<span id="view_number"></span> 篇</div>

第二部

前端就算是写好了，下面就是利用jQuery+Ajax技术写实时获取数据的函数了

//显示效果函数，利用animate
function show_number(value) {  
    var nums = $("#view_number");  
    nums.animate({count: value}, {  
        duration: 500,  
        step: function() {  
            nums.text(String(parseInt(this.count)));  
        }  
    });  
};

//更新触发函数
function nums_update() { 
    $.get("get_data.php", 
    function(data) { 
        show_number(data); 
    }); 
}
//设置3秒一次执行
setInterval(nums_update, 3000); 
nums_update();

第三步开始写数据处理函数页面get_data.php页面

因为涉及到数据库连接数据表信息等就不写详细了，其实就是读取数据表用count统计处数字写成数组JSON数据

建议加强安全，我写的只是步骤思路，具体参数传递还需要你自己去做，如get_data.php获取Ajax里面GET方法的参数传递，需要过滤不合理参数和必须的参数