Django Ajax 实现历史图形查询
2023-09-14 09:13:22 时间
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
中请求数据,并返回到前端页面.
最后,我们输入需要查询的地址以及该地址某个时间段的负载情况,即可查询到图形信息。
相关文章
- ajax跨域解除方案,关于Ajax跨域问题及解决方案详析「建议收藏」
- 什么是Ajax以及ajax请求的步骤[通俗易懂]
- Django(75)django-rest-framework-simplejwt「建议收藏」
- Django(13)django时区问题
- Django(15)外键和表关系[通俗易懂]
- Django(31)模板中常用的过滤器
- django_2
- 【Django】在大型项目中的django的性能模型字段primary_key
- Django Ajax动态图形监控
- Django 单元测试笔记
- Django+Celery学习笔记2——redis异步执行定时任务demo
- windows +apache + django + mod_wsgi 部署 Django 站点
- Django实现简单的增删改查
- Python web实战之Python3.7+ Django+百度地图API【配套视频】
- django 修改代码后,uwsgi 自动重启
- python-Django 高级特性-Django 安全(一)
- 简述Django的信号机制
- Django Rest Framework源码剖析(八)—–视图与路由详解编程语言
- jQuery Ajax 实例 ($.ajax、$.post、$.get)详解编程语言
- Django基础学习七之如何配置django+mysql详解编程语言
- Linux系统下部署Django网站快速指南(linux 部署django)
- 使用Ajax轻松访问和操作MySQL数据库(ajax访问mysql)
- Ajax实现从MySQL读取数据(ajax 读取mysql)
- Ajax无缝接入MySQL数据库(ajax请求mysql)
- 探究Ajax的MySQL驱动原理(ajax原理 mysql)
- Ajax与MySQL实现高效率数据加载(ajax mysql加载)