django 后台传值，前台接收

最新推荐文章于 2024-04-17 00:16:49 发布

原创最新推荐文章于 2024-04-17 00:16:49 发布 · 5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#Python #django

python 专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了如何在Django后端处理数据并将其有效地传递到前端展示。通过实例解析了views.py中的关键代码，包括如何创建视图函数、设置模板以及使用URL配置，确保前端能够正确接收并显示后台数据。

views.py

def chart_first(request):
    result = WeatherCondition.objects.all()
    l=[]
    for res in result:
        #l.append({'tempature_date':res.tempature_date.strftime("%Y-%m-%d"),"tempature":res.tempature})
        l.append(res.tempature)
    return render_to_response('chart_first.html',{'data': json.dumps(l)})

.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="/media/js/jquery-2.1.1.min.js" ></script>
    <script src="/media/js/Chart.js"></script>
    <script>
      var list = '{{ data | escapejs}}';
      console.log(list);
      var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
      var lineChartData = {
         labels : ["January","February","March","April","May","June","July"],
         datasets : [
            {
               label: "My First dataset",
               fillColor : "rgba(220,220,220,0.2)",
               strokeColor : "rgba(220,220,220,1)",
               pointColor : "rgba(220,220,220,1)",
               pointStrokeColor : "#fff",
               pointHighlightFill : "#fff",
               pointHighlightStroke : "rgba(220,220,220,1)",
               data :JSON.parse(list)
            },
            {
               label: "My Second dataset",
               fillColor : "rgba(151,187,205,0.2)",
               strokeColor : "rgba(151,187,205,1)",
               pointColor : "rgba(151,187,205,1)",
               pointStrokeColor : "#fff",
               pointHighlightFill : "#fff",
               pointHighlightStroke : "rgba(151,187,205,1)",
               data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
            }
         ]
      }
   window.onload = function(){
      var ctx = document.getElementById("canvas").getContext("2d");
      window.myLine = new Chart(ctx).Line(lineChartData, {
         responsive: true
      });
   }
   </script>
</head>
<body>
  <div style="width:30%">
            <canvas id="canvas" height="450" width="600"></canvas>
      </div>

</body>
</html>