Question

我正在尝试构建一个仪表板，并希望根据用户选择的内容更新图表。例如，如果用户选择公司A并单击按钮“更新”，则代码会捕获该更改，根据新选择查询数据并再次将其传递给前端。

我已经能够编写大部分代码，我可以根据选择查询数据库。但我不确定如何捕获用户选择并从前端传递到views.py.

型号：

class Airline(models.Model):
    name = models.CharField(max_length=10, blank=True, null=True)
    code = models.CharField(max_length=2, blank=True, null=True)

class FinancialData(models.Model): # All units in millions
    airline = models.ForeignKey(Airline)
    financial_year = models.ForeignKey(Year)
    mainline_revenue = models.DecimalField(max_digits=7, decimal_places=2)
    regional_revenue = models.DecimalField(max_digits=7, decimal_places=2)
    other_revenue = models.DecimalField(max_digits=7, decimal_places=2)

Views.py：

class ListAirlineYearFinancialData(generics.ListAPIView):
    serializer_class = FinancialDataSerializer
    airline_id = Airline.objects.filter(pk=1) # pk=1 is just a placeholder, but want to change based on selection
    queryset = FinancialData.objects.filter(airline_id=airline_id)
    queryset_filtered = queryset.filter(financial_year_id=1)


    def airline_dashboard(request):
        airline_list = Airline.objects.all() 
        year_list = Year.objects.all()
        return render(request, 'dashboard/company_page.html', {'airline_list': airline_list, 'year_list': year_list})

    def get_queryset(self, *args, **kwargs):
        return self.queryset_filtered

Urls.py

url(r'^$', views.ListAirlineYearFinancialData.airline_dashboard, name='airline_dashboard'),

HTML

<form action="" method="GET">
{% csrf_token %}
 <select>
    {% for airline in airline_list %}
        <option>  
            Primary Key:  {{ airline.pk }}
        </option>
    {% endfor %}
 </select>
 <select>
    {% for year in year_list %}
        <option> 
            Year: {{ year.year }}
        </option>
    {% endfor %}
 </select>
 <input type="button" value="Update">
</form>

以下是该网页的屏幕截图：

基本上，我想在Views.py中使这段代码行根据用户的选择进行更改：airline_id = Airline.objects.filter(pk=1)

Answer 1

您可能想要使用一些ajax来避免页面刷新。

以下是它的工作原理：当用户点击更新时，POST请求将通过ajax发送到服务器，并根据用户的选择进行过滤。

Ajax JS 向您的观点发送POST请求：

$(document).on('click', '#your_update_button', function(e){
    var form_data = new FormData($('#your_form')[0]);

    $.ajax({
        type:'POST',
        url:'/your_url/',
        processData: false,
        contentType: false,
        data : form_data,
        success: function(response) {
           #get your json
           respone.your_json_key

           #display to template ...
        }
    });
});

Django，views.py 过滤您需要的任何内容，并以JSON格式以ajax成功返回

def updateData(request):
    if request.method == 'POST':
        identifier = request.POST.get('your_selection_choice')
        airline_id = Airline.objects.filter(pk=identifier)
        serialized_airline_id = serializers.serialize('json', airline_id)
        json_airline_id = json.loads(serialized_airline_id)

        return JsonResponse(data={
            'airline_id' : json_airline_id,
        })
    return redirect(reverse('home'))

我没有使用基于类的视图，但是这会让您了解如何构建您想要实现的视图。

Django - 如何捕获用户在前端进行的选择

1 个答案: