Django Ajax 实现历史图形查询

微软技术分享

发布于 2022-12-28 17:57:49

1K0

发布于 2022-12-28 17:57:49

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中请求数据,并返回到前端页面.