Ajax配合Django后端实现静态网页动态统计浏览量和点赞量

前言

简单介绍一下Ajax技术，顺便讲讲Ajax技术在网页浏览量统计和点赞方面的运用。

什么是Ajax？

AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

Ajax的实际运用场景

在静态网页可以不刷新重载网页实现以下功能，特别是有设置缓存的静态网站，可以动态执行所需要的更新，避免一些不必要资源的再次加载，可以增加浏览器的访问速度，增加客户浏览体验度。
Ajax技术的一些运用实例如下：

1. 页面下拉加载更多
2. 页面搜索框
3. 统计阅读量
4. 实现点赞和统计点赞量
5. …

具体运用

统计博文浏览量

最近建设的个人博客网站为了提高网页加载速度，给网站设置了缓存，这也导致了不能实时更新网页数据，于是为了统计阅读量，应用了Ajax技术。

在主页方面

由于是静态网页设置了缓存，所以不可能实时更新浏览量数据，所以在网站主页获取各博文的浏览量时得向后端发送Ajax的异步请求，获取此时各博文的浏览量，动态更新到各博文框。

1. 获取当前页面各博客的id，形成id数组。
2. 利用Ajax异步请求，将数据传到Django后端。
3. 之后获取Django后端查询数据库获取各id对应博文的浏览量。
4. 最后分别将浏览量数据写入每篇博文框里面。

请求的内容如下：

获取的数据数组如下：

前端

//Jquery版本
 <!-- 阅读量统计 -->
    <script>
        var postarray = new Array();
        //根据Django模板语言获取当前页面的各博文的id，形成id数组。
        {
   % for article in perpage_data %}
            postarray.push({
   {
    article.id}});
        {
   % endfor %}
        //利用Ajax请求数据，获取数据。
        $.ajax({
   
            type: "post",//请求的类型
            url: "/ajax/home", //请求的后端处理路径
            contentType: "application/json; charset=utf-8",//请求的数据类型
            //请求的数据
            data: JSON.stringify({
   
                post_ids: postarray, 
            }),
            dataType: "json",
            //如若请求成功，返回200状态码，执行以下函数。
            success: function (results) {
   
            //遍历返回的数据数组，分别对应写入博文框
                for (var result in results) {
   
                    $('#' + result).text(results[result