1、路由表
urlpatterns = [
url(r'^upgrade_home/$', views.upgrade_home, name='upgrade_home'),
url(r'^line/$', views.ChartView.as_view(), name='line'),
# url(r'^lineUpdate/$', views.ChartUpdateView.as_view(), name='lineUpdate'),
url(r'^index/$', views.IndexView.as_view(), name='index'),
# url(r'^index/$', views.index, name='index'),
url(r'^get_env_info/$', views.get_env_info, name='get_env_info'),
url(r'^dynamic/$', views.dynamic, name='dynamic'),
path(r'upgrade_home/reset/<int:topic_id>/', views.reset, name='reset'),
]2、视图代码
def get_env_info(request):
return render(request, 'test.html')
def dynamic(request):
ip = request.GET['ip']
cpu_usage = randrange(0, 100)
ram_usage = randrange(0, 100)
rom_usage = randrange(0, 100)
log = randrange(0, 100)
context = {'host': ip,
'cpuusage': cpu_usage,
'ramusage': ram_usage,
'romusage': rom_usage,
'log': log,
}
print(context)
return response_as_json(context)
def response_as_json(data):
json_str = json.dumps(data)
response = HttpResponse(
json_str,
content_type="application/json",
)
response["Access-Control-Allow-Origin"] = "*"
return response3、模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<p>环境实时监控</p>
<input type="text" id= 'ip' name="ip" value="127.0.0.1"><br><br>
<p style="font-size:5px">cpu使用率{{ cpu.value }}:</p>
<progress id='cpuusage' name="cpu" value="22" max="100"></progress><br><br>
<p style="font-size:5px">ram使用率{{ cpu.value }}:</p>
<progress id='ramusage' name="ram" value="22" max="100"></progress><br><br>
<p style="font-size:5px">rom使用率{{ cpu.value }}:</p>
<progress id='romusage' name="rom" value="22" max="100"></progress><br><br>
<script>
$(function() {
function getenvinfo (ip){
if (ip.length>8){
$.ajax({
type:'GET',
url:'http://127.0.0.1:8000/upgrade/dynamic',
data:{
ip:ip
},
success:function (result) {
console.log(result)
$('#cpuusage').val(result.cpuusage)
$('#ramusage').val(result.ramusage)
$('#romusage').val(result.romusage)
},
error:function (e) {
console.log(e.status);
}
});
}
}
$('#ip').on('blur',function (){
getenvinfo($(this).val())
});
$('#ip').keyup(function(event){
if(event.keyCode ==13){
getenvinfo($(this).val())
}
});
setInterval(function (){
getenvinfo($('#ip').val())
},10000)
});
</script>
</body>
</html>