2017-04-24 37 views
0

我一直在这个问题上停留了几周,因为我不太熟悉如何获得ajax设置。我正在研究一个Django应用程序,它基本上是一个有下拉菜单的页面。我想获得用户从下拉菜单中选择的任何内容,并将该数据传递到我的views.py中,以便我可以使用该信息来显示图形。现在图表部分正在工作(我可以将硬编码数据传入它,它会生成图表),我的下拉列表也可以正常工作。但是,我不知道如何从下拉菜单中获取数据到我的views.py中。这是它的外观。从下拉菜单中获取输入到Django应用内的Python

Display.html

{% extends "RecordEvent/nav.html" %} 

<head> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
</head> 


{% block content %} 
<div class="row"> 
    <div class="padded"> 
     <div class="download-header"> 
      <h3>Logs</h3> 
      <div class="row inline download-header"> 
       <div class="col-lg-6"> 
        <div class="dropdown padding col-lg-6"> 
          <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
          <span id="dropdownTitle" class="">Measurable</span> 
          <span class="caret"></span> 
          </button> 
          <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
          {% include 'RecordEvent/includes/EntryDropdown.html' %} 
          </ul> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

<div class='padded'> 
    <div class='col-sm-12' url-endpoint='{% url "api-data" %}'> 
     <h1>Graph Data</h1> 
     <canvas id="myChart" width="400" height="400"></canvas> 
    </div> 
</div> 

<script> 
{% block jquery %} 
var endpoint = 'display/api/chart/data/' 
var defaultData = [] 
var defaultLabels = []; 
$.ajax({ 
    method: "GET", 
    url: endpoint, 
    success: function(data){ 
     defaultLabels = data.labels 
     defaultData = data.default 
     console.log(data) 
     var ctx = document.getElementById("myChart"); 
     var myChart = new Chart(ctx, { 
      type: 'line', 
      data: { 
       labels: defaultLabels, 
       datasets: [{ 
        label: '# Measurable', 
        data: defaultData, 
        borderWidth: 1 
       }] 
      }, 
      options: { 
       scales: { 
        yAxes: [{ 
         ticks: { 
          beginAtZero:true 
         } 
        }] 
       } 
      } 
     }); 
    }, 
    error: function(error_data){ 
     console.log("error") 
     console.log(error_data) 
    } 
}) 

{% endblock %} 

</script> 

{% endblock %} 

第一个div创建的下拉菜单。下面的一切都是为了获得图形设置。

views.py

@login_required 
def DisplayView(request): 
    return render(request,'DisplayData/Display.html') 

class ChartData(APIView): 
    authentication_classes = [] 
    permission_classes = [] 

    def get(self, request, format=None): 
     all_entries = models.Entries.objects.all().filter(parent=2) #change to input from drop down 
     all_id = models.Entries.objects.all().values_list('id', flat=True) 
     all_measurables = models.Measurables.objects.all().filter(user_id=1) #change to current user 


     all_times = [m.timestamp for m in all_entries] 

     all_data = [] 
     for m in all_entries: 
      data = m.data 
      json_data = json.loads(data) 
      value = json_data['value'] 
      all_data.append(value) 


     data = { 
      "labels": all_times, 
      "default": all_data, 
      #"default": all_parent, 
     } 
     return Response(data) 

@login_required 
def LogDisplay(request): 
    measurables=[entry for entry in models.Measurables.objects.all().filter(user_id=request.user.id)] 

    return render(request, 'DisplayData/Logs.html',{'dropdown':measurables}) 

我需要从下拉列表中值下降到那里评论说得到下降值下降。

我该怎么办呢?

+0

如何是U submiting形式向API – Rhea

+0

那是什么我因为我不知道如何做POST,所以很麻烦。现在它只是显示表单。 @Rhea – FlameDra

+0

是否要刷新页面或通过ajax发布? – Rhea

回答

0

通过形式发布与

request.post[<name>] 

<form method='post' action = 'api url'> 
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
         {% include 'RecordEvent/includes/EntryDropdown.html' %} 
         </ul> 
</form> 

AMD在views.py获得通过AJAX发布

$('ul li').click(function(){ 
    $.ajax({ 
     url: <api url>, 
     type:'post', 
     data:{<name>:$(this).html()}, 
    }) 
+0

对于request.post []我是否传入python中的变量名称或html中的表单名称? ajax代码的位置在表单之后? – FlameDra

+0

ajax代码出现在'{%block jquery%}'中 与您在ajax数据中给出的名称相同:{} – Rhea