Django Ajax 实现历史图形查询
2023-02-18 16:46:17 时间
Django 通过Ajax接口实现前后端数据交互功能,通过Ajax实现当用户输入要查询的数据时,发送到后端,后端处理后推送到前端,前端直接绘制图形。
首先实现Ajax前后端简单交互功能,我们直接在templates
新增一个index.html
并在代码中调用echarts前端绘图库.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.lyshark.com/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.lyshark.com/echarts/5.0.0/echarts.min.js" type="text/javascript"></script>
</head>
<body>
<div id="main" style="height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
$.ajax({
type: "get",
url: "/_ajax",
dataType: "json",
success: function (data) {
var option = {
title: {
left: 'center',
text: '测试数据'
},
tooltip: {},
xAxis: {
data: data.key
},
yAxis: {},
series: [{
name: '数量',
type: 'bar',
data: data.value
}]
};
myChart.setOption(option);
},
error: function () {
alert('Error: ajax')
}
})
</script>
</body>
</html>
接着我们在urls.py
中新增一个路由,该路由我们命名为echart
指向views.echart
视图。
from django.contrib import admin
from django.urls import path
from MyWeb import views
urlpatterns = [
path('echart',views.echart),
path('_ajax',views._ajax)
]
最后转到views.py
中实现echart
视图与_ajax
两个视图函数.
from django.shortcuts import render
from django.shortcuts import HttpResponse
from django.shortcuts import render,HttpResponse
from django.http import JsonResponse
# 调用绘图函数
def echart(request):
return render(request,"index.html")
# 实现参数传递接口
def _ajax(request):
send_json = {
"key": [1,2,3,4,5,6,7,8],
"value": [1,2,3,4,5,6,7,8]
}
return JsonResponse(send_json)
此时当用户访问index.html
页面时会自动路由到echart()
函数上,该函数会去_ajax
中请求数据,并返回到前端页面.
最后,我们输入需要查询的地址以及该地址某个时间段的负载情况,即可查询到图形信息。
相关文章
- Linux中那些没用但好玩的命令
- Go语言编程设计学习Day1:helloworld 变量 常量
- C++ Primer Plus习题及答案-第十五章
- 使用Go开源的一款性能监控软件
- 你应该知道的17个Golang包
- SSH Google Authenticator
- Oneinstack Nginx 反代 Google
- 嵌入式:ARM指令集分类及编码
- Linux系统中JAVA创建文件后权限不足的问题,无法设置权限的问题
- git 强制回退到指定版本
- git 切换远程仓库地址
- git 提示error setting certificate verify locations 解决方案
- Linux 查看占用内存前10的命令
- git分支使用规范
- Helm 搭建K8S环境gitlab-runner
- 生物信息数据分析教程视频——15-clusterProfiler包+ClueGO做富集分析
- IMvigor210CoreBiologies包官方下载链接失效问题
- Kagol:2022年最值得推荐的前端开源文章
- 把时间沉淀到自己的热爱里 | Kagol 的 2022 年终总结
- 使用Git,10件你可能需要“反悔”的事