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

文章目录

前言
- 什么是Ajax？
- Ajax的实际运用场景
具体运用
- 统计博文浏览量
- - 在主页方面
  - - 前端
    - 后端
  - 在博文页面
  - - 前端
    - 后端
- 统计点赞量
最后

前言

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

什么是Ajax？

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

Ajax的实际运用场景

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

页面下拉加载更多
页面搜索框
统计阅读量
实现点赞和统计点赞量
…

具体运用

统计博文浏览量

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

在主页方面

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

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

请求的内容如下：

获取的数据数组如下：

前端

//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]); }},})</script>//Js版本
<!-- 阅读量统计 --><script type="text/javascript">var postarray = new Array();//根据Django模板语言获取当前页面的各博文的id，形成id数组。{% for article in perpage_data %}postarray.push({{ article.id}});{% endfor %}var xhr = new XMLHttpRequest(); //new一个ajax对象xhr.open("post", "/ajax/home"); //请求的后端处理路径xhr.setRequestHeader("Content-Type", 'application/json');//请求的数据类型xhr.send(JSON.stringify({post_ids: postarray}));//将数据变成JSON格式，发送请求数据。//当请求成功，返回200结果，onload加载执行。xhr.onload = function () {results = JSON.parse(xhr.responseText);//遍历返回的数据数组，分别对应写入博文框for(var result in results){var html = document.getElementById(''+result);html.innerHTML = results[result];}}</script>

后端

import json
from django.http import JsonResponse
from article.models import Articledef ajaxOFhome_view(request):# 获取请求的json格式数据receive_data = json.loads(request.body.decode())['post_ids']results = {}#根据获取的博文id数组，查询数据库，获取对应博文的阅读量，#形成数据数组JSON格式返回给前端。for id in receive_data:article = Article.objects.filter(id=id).defer('body').first()results['views' + str(id)] = article.viewsreturn JsonResponse(results)

在博文页面

每次进入该页面都要执行一次对该博文的阅读量+1，道理跟首页的一样，只不过只请求一个id数据，后端的数据查询数据库后需要更新数据（阅读量+1）
Ajax的POST请求的内容如下：

返回的数据如下：

前端

<script>$.ajax({type: "post",url: "/ajax/article",contentType: "application/json; charset=utf-8",data: JSON.stringify({post_id: {{ article.id }}, //只请求当前博文页面的id}),dataType: "json",//请求成功，将最新的阅读量写入博文页的阅读量。success: function (results) {$('#views').text(results['views' + {{ article.id }}]);},error: function (results) {alert('错误提示:' + results.status + '!\n阅读量统计出错！请联系管理员QQ:372347736！');}})</script>

后端

import json
from django.http import JsonResponse
from article.models import Articledef ajaxOFarticle_view(request):receive_id = json.loads(request.body.decode())['post_id']results = {}  # 储存返回json信息#查询该id对应的文章，阅读量+1，然后返回更新后的阅读量article = Article.objects.defer('body').get(id=receive_id)article.views += 1article.save()results['views' + str(receive_id)] = article.viewsreturn JsonResponse(results)

统计点赞量

点赞量在网站首页的请求方式跟阅读量大体一致，查询博文的点赞量的方法也是一样，主要差异是在点了点赞按钮才会触发该id对应的博文的点赞量+1，所以只列举以下按钮触发Ajax请求。

<button type="button" class="btn btn-sm btn-white" id="button"><i class="fa fa-thumbs-o-up"></i> 点赞
</button><script>$(function () {//button为按钮的id，当鼠标单击时触发ajax请求。$("#button").on('click', function () {$.ajax({type: "post",url: "/ajax/post",contentType: "application/json; charset=utf-8",data: JSON.stringify({'post_id': {{ post.id }},}),dataType: "json",success: function (results) {console.log("点赞成功哦！谢谢支持!");//给对应点赞量显示旁边的数据更新var html = document.getElementById('liked_count');html.innerHTML = results.num;var params = document.getElementById('button');//将点赞按钮锁定，不要重复点。params.innerHTML = "<i class='fa fa-thumbs-o-up'></i> 已赞</button>";params.setAttribute('disabled', 'disabled');params.setAttribute('style', "color: red;");fnCreateAlert("点赞成功！谢谢支持！",true);}})})});
</script>

最后

有兴趣的可以参观利用Django建设起来的网站，也是用Ajax实现了阅读量统计---->Hcode网站