Django框架中使用Ajax实现数据的实时加载
这里写自定目录标题
- django中需要导入的包
- django中的代码
- django中对Ajax的请求进行发送数据
- 页面代码
是用来在django框架的Web页面上进行异步刷新
django中需要导入的包
import json
django中的代码
首先是对web页面进行数据的传送，我上传的是我毕设中的一个demo，temperature是我数据库表名，后面的操作是从数据库中拿出最新的15条数据，因为是使用order_by(‘-id’)，所以读取出来的数据都是倒叙的（我的是倒叙，但是不清楚是不是都是这样），aa[::-1]的作用就是将元组（我感觉提取出来的应该是元组）进行倒叙
def temperature1(request):
aa=temperature.objects.order_by('-id')[:15]#最近的15个值
dict_temperature={}#字典
dict_temperature['list']=aa[::-1]
return render_to_response('app1/temperature.html', dict_temperature)
django中对Ajax的请求进行发送数据
代码和上面的差不多，不过有两个变化，第一个是在自定义的字典dict_temperature中设置键（我觉得是没必要的，应该是没有影响的，但是我实在懒得进行测试，所以就这样了-_-），第二个就和之前导入的包有关了，是将字典的数据类型设置为json格式，就是倒数第二行，然后用HTTP Response传到前端，代码中的data和time是我在数据库中的两个值，value_list(’ ')读取出来的只有你存入的数值，不包括字段名，谨记这个不要修改，是有作用的。
def temperature_ajax(request):
dict_temperature={'time':"",'data':""}
time = temperature.objects.values_list('time').order_by('-id')[:15]
data = temperature.objects.values_list('data').order_by('-id')[:15]
dict_temperature['time']=time1[::-1]
dict_temperature['data']=data1[::-1]
j_dict = json.dumps(dict_temperature)
return HttpResponse(j_dict)
页面代码
这是我整个页面的代码，导入的JS文件和CSS文件自己想办法，很容易下载。我用的是highcharts的图表，代码中的直接复制就可以用了。图表的代码在body下面的script中，第一个是显示页面的表格，重点在后面的setInterval中，Ajax的异步刷新就是在这里体现的。一定要看清Ajax中的url，这是往后台请求的地址。两个图表的代码略有不同，主要是是传递数值的方式不同，第一个是jinja2方式，第二个是后台传递的字典的两个键，剩下的看代码吧，是可以直接实现的，前提是你得改好你的数据库，以及你传递的键名称。
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="{% static 'layui/css/layui.css' %}">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://img.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="https://img.highcharts.com.cn/highcharts/modules/exporting.js"></script>
<script src="https://img.highcharts.com.cn/highcharts/modules/series-label.js"></script>
<script src="https://img.highcharts.com.cn/highcharts/modules/oldie.js"></script>
<script src="https://img.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>
<style>
.linear{
width:100%;
height:600px;
{#FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColorStr=red); /*IE 6 7 8*/#}
{#background: -ms-linear-gradient(top, #fff, #0000ff); /* IE 10 */#}
{#background:-moz-linear-gradient(top,#b8c4cb,#f6f6f8);/*火狐*/ #}
{##}
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#b8c4cb), to(#f6f6f8));/*谷歌*/
{##}
{#background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#0000ff)); /* Safari 4-5, Chrome 1-9*/#}
{##}
{#background: -webkit-linear-gradient(top, #fff, #0000ff); /*Safari5.1 Chrome 10+*/#}
{##}
{#background: -o-linear-gradient(top, #fff, #0000ff); /*Opera 11.10+*/#}
}
</style>
<body>
<div class="content linear" align="center">
<div id="container" style="width:1240px;height:400px">
</div>
</div>
</body>
<script src="{% static 'layui/layui.js' %}"></script>
<script src="{% static 'js/jquery.js' %}"></script>
<script src="{% static 'js/login.js' %}"></script>
<script>
window.onload=function () {
$("#yyy").html({{ avg }});
$("#new").html({{ new }});
{% if state == 0 %}
$("#state").html("当前室内温度较低");
{% elif state == 1 %}
$("#state").html("当前室内温度良好");
{% elif state == 2 %}
$("#state").html("当前室内温度较高，请注意通风");
{% elif state == 3 %}
$("#state").html("当前室内温度过高，请注意通风散热！");
{% elif state == 4 %}
$("#state").html("当前室内温度不正常，请尽快查看！！！");
{% endif %}
{% if warning == '1'%}
alert("WARNING:温度较高，请注意！")
{% elif warning == '0' %}
alert("WARNING:温度较低！")
{% endif %}
var chart = Highcharts.chart('container', {
title: {
text: '工厂温度变化情况'
},
subtitle: {
text: '数据来源：温湿度传感器实时采集'
},
yAxis: {
title: {
text: '温度变化'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
xAxis:{
categories:[
{% for foo in list %}
'{{ foo.time|date:"Y-m-d H:i:s" }}',
{% endfor %}
]
},
series: [{
name: '温度 ℃',
data: [
{% for foo in list %}
{{ foo.data }},
{% endfor %}
]
}],
})
}
setInterval(function (e) {
$.ajax({
url:"../temperature_ajax/",
type:"POST",
translations:true,
success:function (res) {
console.log(JSON.parse(res))
var tt =JSON.parse(res);
$("#yyy").html(Math.round(tt.avg*1));
$("#new").html(tt.new);
console.log(tt.data);
console.log(tt.time);
console.log(tt.qq);
{% if state == 0 %}
$("#state").html("当前室内温度较低");
{% elif state == 1 %}
$("#state").html("当前室内温度良好");
{% elif state == 2 %}
$("#state").html("当前室内温度较高，请注意通风");
{% elif state == 3 %}
$("#state").html("当前室内温度过高，请注意通风散热！");
{% elif state == 4 %}
$("#state").html("当前室内温度不正常，请尽快查看！！！");
{% endif %}
chart = Highcharts.chart('container', {
title: {
text: '工厂温度变化情况'
},
subtitle: {
text: '数据来源：温湿度传感器实时采集'
},
yAxis: {
title: {
text: '温度变化'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
xAxis:{
categories: tt.time,
},
series: [{
name: '温度 ℃',
data: tt.data,
}],
})
}
})
{#$.ajax({#}
{# url:"../fire_warning/",#}
{# type:"POST",#}
{# })#}
},5000)
</script>
</html>
urls.py文件
path('temperature/',views.temperature1),
path('temperature_ajax/',views.temperature_ajax),