Django中js定时器与ajax或getJson的配合运用_django ajax定时请求-CSDN博客

本文链接：https://blog.csdn.net/weixin_47017011/article/details/117844377

我们在用django做项目的时候经常需要将后台接收到的数据传送给前端显示，最基础的方法就是在html文件里“挖坑”（{{ data }}），再在后端将数据通过字典的形式进行传输，这种方法算是最为简便的方法了，但是在有一些场合，比如某个位置的数据会出现周期性的变化，如果我们还使用这个方法的话，就需要不断刷新网页，这样对服务器的资源损耗是极高的，那么有没有一种方法可以让我们既降低内部损耗也能使用户在使用的时候尽可能减少多余操作呢？

答案就是JavaScript中的定时器与ajax或getJson相配合

不过在这之前我们需要先了解一下上面说到的这三个东东到底是啥!

什么是定时器？
JS提供了一些原生方法来实现延时或执行某一段代码，其实就是能实现定时执行某些代码的一个东西！
什么是ajax？
ajax是一种用于创建快速动态网页的技术。通过在后台与服务器少量数据交换，ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页某部分进行更新。
我把ajax在django中的应用理解成是去调用django某个视图函数

接下里我们看看他们怎么使用

由于我对JavaScript的理解并没有很透彻，且本文重点在于Django，所以这里就不赘述他们的原理或者使用方法了，以免出错，直接上一个我最常用的格式，有兴趣的小伙伴可以自己去查，定时器的用途很广，可以用来做很多有去的东西！
（以下代码为JavaScript代码）

function xxx() {
	xxx
}

var time1 = setInterval(function () {
	xxx();
},100);

clearInterval(function () {
	time1;
})

上面的代码是一个定时器的格式，主要计时在于中间那段，100表示每100毫秒执行一次xxx函数，clearInterval的存在是为了每次执行一次定时器都能关闭定时，防止资源消耗！
（以下代码为JavaScript代码）

$.ajax({
    type: 'GET',
    url: 'http://127.0.0.1:8000/App/send/',
    data: {
        'data': 'SEND',
    },
});

这段代码则是最简单的ajax规格，type表示请求网页的方式，url表示请求服务器的某个路由，data表示传输给服务器的数据。

小插曲
在使用ajax之前我们需要先下载jquery！这个只需要去官网把文件下载下来,找到jquery.js文件或者jquery.min.js文件然后粘贴到项目文件里，在html再进行引用就可以了，我一般习惯在项目文件新建一个static文件，再在里面新建一个js文件，把jquery复制到这个文件夹里，在引用时现在html文件头写上下面这句话在这里插入图片描述
在写这句话之前要确保settings文件里面有这个配置

一切都弄好之后我们就在html的文件末尾

记住要在引用js文件之上（上面就是我引用js文件的代码）
写下

<script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script>

如果你js文件夹下的文件是jquery.js就直接写jquery.js，不用跟我一样写jquery.min.js，当然如果你不想下载jquery也没关系，可以直接通过线上API引用，只不过每次登陆网页的时候网络都要够好

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

聪明的你一定已经猜到定时器和ajax怎么配合了！
对的没错，就是把ajax放在一个函数里或者直接写在setInterval的函数体里，这样就可以设置一个计时，每一百毫秒（100）或者每一秒（1000）访问一次某个路由，但是我前面并没有说怎么获取后台数据，只说了怎么发送数据，也没有说后台怎么获取前端发送过来的数据！

对于后台获取前端发送数据很简单，只需要一句
```
content = request.GET.get('data')
```
这个get里面的data要与图中js代码画圈的地方一样

这样子content得到的数据就是从前端发送给后台的数据了！

对于后端数据发送到前端
这里我选择的是把数据封装成Json格式的数据再发送到前端
-首先，在js代码里写下如下代码：

$.getJSON('http://127.0.0.1:8000/App/sendtohtml/', function(data) {
	
})

url中的路由应该对应视图函数里用来发送给前端数据的函数，后面的data即为后端传过来的Json字典
-在view文件里：

def sendtohtml(request):
	content = 'xxx'
	data = {
		'data': content,
		'status': 200
	}
	return JsonResponse(data=data) # 需要导入JsonResponse包（Alt+Enter即可导入）

记住在url文件里添加路由
status是状态码，用于验证数据是否传输正常，数字不限，但一般都是有内部规定，这里就用200
-回到js文件：

$.getJSON('http://127.0.0.1:8000/App/sendtohtml/',function(data) {
	if(data['status'] === 200){
		htmldata = data['data'];
		// 这里的htmldata就是所接收到后台的数据
		$('#div1').html(htmldata);
		// #div即为要变数据的div的id，这里没有引入jquery无法使用
		// .html()就是id为div1的div的数据设置为htmldata
		// 设置数据的方式有很多种，学习完js后就知道了，这里只讲一种最简单的方式
	}
})